JS实现页面元素显示/隐藏切换的方法

实际开发中，有时候需要设置一个元素出事状态为隐藏，通过某一操作来实现显示和隐藏之间的切换，通过学习，将我目前掌握的显示和隐藏方法总结如下：

一、通过原生JS实现

<html>
<head>
      <meta charset="UTF-8">
      <style>
           #div1{
                 height:100px;
                 width:100px;
                 background-color:red;
                 display:none;
                 margin:10px;
           }
      </style>
      <script>
           function toggleDisplayStatus(){
                      var oDiv = document.getElementById("div1");
                      var aDisplay = oDiv.currentStyle["display"];
                      if("none" == aDisplay){
                            oDiv.style.display = "block";
                      }else{
                            oDiv.style.display = "none";
                      }
                 }
      </script>
</head>
<body>
      <input type="button" value="切换" onclick="toggleDisplayStatus()"/>
      <div id="div1"></div>
</body>
</html>

延申：关于获取单元格的style属性，使用“o.style.display”只能获取到行间样式，以CSS方式插入的样式，是无法获取到的，所以这里使用了“o.currentStyle["display"]”，如果是非IE，需要使用“getComputedStyle(o,false)[ "display"]”,兼容模式写法如下：

if(obj.currentStyle) {
        return obj.currentStyle[attr];
    } else{
        return getComputedStyle(obj,false)[attr];
    }
}

二、使用jQuery实现

我目前知道jQuery有6个相关方法可以用于实现该功能，可以分为两类：

1、直接显示或隐藏

$( "#div1").show(); 若原状态为隐藏，则将其隐藏

$( "#div1").hide(); 若原状态为显示，则将其隐藏

$( "#div1").toggle(); 该方法是上面两个方法的综合

2、拉动式显示或隐藏

$( "#div1").slideUp(); 若原状态为显示，则将其从下向上收回

$( "#div1").slideDown(); 若原状态为隐藏，则将其从上向下显示

$( "#div1").slideToggle(); 该方法是上面两个方法的综合

备注：

（1）以上六个方法都可以有两个参数，第1个是显示/隐藏的速度，第2个是显示/隐藏执行结束之后需要执行的函数；

（2）拉动式显示或隐藏类似于拉窗帘的效果，个人认为用户体验好一些，但是目前发现，现实的时候会出现抖动情况，即先下拉到比较长的距离，再恢复，具体引发原因未知。
---------------------

JS实现页面元素显示/隐藏切换的方法

猜你喜欢