display：none和visibility：hidden属性对比；visibility:collapse属性的浏览器差异

最新推荐文章于 2024-10-18 11:12:30 发布

weixin_34018169

最新推荐文章于 2024-10-18 11:12:30 发布

阅读量204

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000006949516

版权

HTML的display 属性

作用：设置元素如何显示。
JavaScript语法：Object.style.display=value

图片描述

说到display：none，想起它和visibility:hidden的对比。

display:none和visibility:hidden

隐藏一个元素可以通过把display属性设置为"none"，或把visibility属性设置为"hidden"。但是请注意，这两种方法会产生不同的结果。
visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
display:none可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

visibility:collapse

既然说到visibility属性，他还有visible和collapse属性值，visible和hidden对应，不需多说。collapse属性却很有意思，当一个元素的 visibility 属性被设置成 collapse 值后，对于一般的元素，它的表现跟 hidden 是一样的。但例外的是，如果这个元素是table相关的元素，例如table行，table group，table列，table column group，它的表现会和浏览器不同而变化。
在此使用FF48.0.2、Chrome 52.0.2743.116和IE8测试：

在谷歌浏览器里，使用 collapse 值和使用 hidden 值没有什么区别。
在火狐浏览器和IE8里，使用 collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。效果类似于display：none。

test code as follows:

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <style type="text/css">
      body {
        text-align: center;
        padding-top: 20px;
        font-family: Arial, sans-serif;
      }

      table {
        border-collapse: separate;
        border-spacing: 5px;
        border: solid 1px black;
        width: 500px;
        margin: 0 auto;
      }

      th, td {
        text-align: center;
        border: solid 1px black;
        padding: 10px;
      }

      .vc {
        visibility: collapse;
      }

      .vh {
        visibility: hidden;
      }

      button {
        margin-top: 5px;
      }
    </style>
  </head>
  <body>
      <table cellspacing="0" class="table lazy ">
        <tr>
          <th>Fruits</th>
          <th>Vegetables</th>
          <th>Rocks</th>
        </tr>
        <tr>
          <td>Apple</td>
          <td>Celery</td>
          <td>Granite</td>
        </tr>
        <tr>
          <td>Orange</td>
          <td>Cabbage</td>
          <td>Flint</td>
        </tr>
      </table>


      <p><button>collapse行1</button></p>
      <p><button>hide行1</button></p>
      <p><button>重置</button></p>

      <script type="text/javascript"> 
          var btns = document.getElementsByTagName('button'),
              rows = document.getElementsByTagName('tr');

/* 使用FF和Chrome的测试代码，使用addEventListener()，false表示事件冒泡
          btns[0].addEventListener('click', function () {
            rows[1].className = 'vc';
          }, false);

          btns[1].addEventListener('click', function () {
            rows[1].className = 'vh';
          }, false);

          btns[2].addEventListener('click', function () {
            rows[1].className = '';
          }, false);
*/
//使用IE8测试的代码,使用attachEvent()，默认事件冒泡
          btns[0].attachEvent('onclick', function () {
            rows[1].className = 'vc';
          });

          btns[1].attachEvent('onclick', function () {
            rows[1].className = 'vh';
          });

          btns[2].attachEvent('onclick', function () {
            rows[1].className = '';
          });
      </script>
  </body>
</html>

这里复习了时间冒泡和IE8的事件处理兼容。
由于 IE8 及更早版本只支持事件冒泡，所以通过attachEvent()添加的事件处理程序都会被添加到冒泡阶段。DOM2标准会建议采用冒泡阶段(false)，但是也可以采用捕获阶段(true）。

var btn = document.getElementById("myBtn"); //取得DOM元素
btn.attachEvent("onclick", function(){   //注意使用了带on的事件名和匿名函数
alert("Clicked");
});

weixin_34018169

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫