溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“JS顯示隱藏功能怎么實現”，在日常操作中，相信很多人在JS顯示隱藏功能怎么實現問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”JS顯示隱藏功能怎么實現”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
效果：
點擊按鈕可以將紅色區域隱藏掉，并且可以將按鈕文字顯示成顯示。代碼如下
<!DOCTYPE html> <!--文檔聲明--><html lang="en"> <!--根節點-->
<head><!--樹枝節點--><!--父節點-->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title><!--子節點-->
</head>
<style>
#box { width:200px; height:200px; background-color:red;
} .hidden { display: none;
} .show { display: block;
} </style>
<body>
<input id="btn" type="button" value="隱藏">
<div id="box"></div>
ESlint 查詢代碼規范的工具 <script>
//1 獲取元素
var btn = document.getElementById('btn'); var box = document.getElementById('box'); var isshow = true; // 2 給按鈕注冊點擊事件
btn.onclick = function(){ //當前box 是顯示隱藏
if(isshow){ // 3 控制div的顯示隱藏
box.className ='hidden'; //修改按鈕上的文字
btn.value = '顯示';
isshow = false;
}else{ // 3 控制div的顯示隱藏
box.className ='show'; //修改按鈕上的文字
//在事件處理函數中 this-- 事件源 觸發事件的對象
btn.value = '隱藏';
isshow = true;
}
}; // 函數中的this -->window對象
// function fn(){
// console.log(this)
// }
// fn();
// 方法中的 this --> 是調用該方法的對象
// var obj = {
// name = 'zs',
// say:function(){
// console.log(this);
// }
// }
// obj.say();
//構造函數中的this -->當前對象
// 事件處理函數中的this --> 觸發事件的對象事件源
</script>
</body></html>到此，關于“JS顯示隱藏功能怎么實現”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
