JS顯示隱藏功能

更新時間：2021-11-30 10:31:43 來源：動力節點瀏覽916次

利用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設置樣式下一篇JS添加事件監聽的方法