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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值