JS显示隐藏功能

更新时间：2021-11-30 10:31:43 来源：赢咖4 浏览658次

利用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添加事件监听的方法