资讯专栏INFORMATION COLUMN

display:none和visibility:hidden属性对比;visibility:coll

BearyChat / 1918人阅读

摘要:的属性作用设置元素如何显示。语法说到,想起它和的对比。既然说到属性,他还有和属性值,和对应,不需多说。由于及更早版本只支持事件冒泡,所以通过添加的事件处理程序都会被添加到冒泡阶段。取得元素注意使用了带的事件名和匿名函数

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:



  
  
  
  
  
      
Fruits Vegetables Rocks
Apple Celery Granite
Orange Cabbage Flint

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111569.html

相关文章

  • CSS中用 opacity、visibilitydisplay 属性将 元素隐藏 的 对比分析

    摘要:说明用来设置透明度定义建立布局时元素生成的显示框类型用来设置元素是否可见。总的来说,使用和属性,自身的事件不会触发,而使用属性,自身绑定的事件还是会触发的。 说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0...

    rollback 评论0 收藏0
  • CSS中用 opacity、visibilitydisplay 属性将 元素隐藏 的 对比分析

    摘要:说明用来设置透明度定义建立布局时元素生成的显示框类型用来设置元素是否可见。总的来说,使用和属性,自身的事件不会触发,而使用属性,自身绑定的事件还是会触发的。 说明 opacity 用来设置透明度 display 定义建立布局时元素生成的显示框类型 visibility 用来设置元素是否可见。 opacity、visibility、display 这三个属性分别取值 0...

    yanest 评论0 收藏0
  • CSS魔法堂:display:nonevisibility:hidden的恩怨情仇

    摘要:不耽误表单提交数据虽然我们无法看到的元素,但当表单提交时依然会将隐藏的元素的值提交上去。让元素在见面上不可视,但保留元素原来占有的位置。不过由于各浏览器实现效果均有出入,因此一般不会使用这个值。继承父元素的值。 前言  还记得面试时被问起请说说display:none和visibility:hidden的区别吗?是不是回答完display:none不占用原来的位置,而visibilit...

    selfimpr 评论0 收藏0
  • 《CSS世界》笔记五:CSS层叠规则及元素隐藏

    摘要:元素层叠顺序补充说明位于最下面的特指层叠上下文元素后面会详解的边框和背景色。界中可能有其他的层叠结界,而自身也可能处于其他层叠结界中。 上一篇:《CSS世界》笔记四:流的保护与破坏 写在前面 《CSS世界》这本书还剩六章,但是这本书的精华部分主要是前面的内容,这里仅把后面章节相对重要的内容以博客展示,想着了解更多的小伙伴还是去阅读原文的好,毕竟三百多页的一本书并不是小小几篇博客能完全说...

    godruoyi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<