利用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>