全局属性hidden

2019-04-19278次阅读html5
  • hidden属性是HTML5中的新属性。
  • hidden属性规定对元素进行隐藏,隐藏的元素不会被显示,包括例如屏幕阅读器。
  • 但hidden元素及其后代的元素仍处于活动状态,这意味着script脚本元素仍然可以执行,form表单元素仍然可以提交。即元素和脚本可以引用隐藏在其他上下文中的元素。
  • 改变具有hidden属性元素的CSS的display属性将覆盖该行为。 例如元素被设置为display: flex将会导致元素显示出来,尽管设置了hidden属性。
  • 以上种种表明hidden不适合真正隐藏一个元素,而真正的使用场景应该类似如:您可以将一个带有hidden标签的canvas元素作为屏幕外的缓存区域,或者在表单控件中引用一个已经hidden的表单。
  • hidden属性是布尔属性。

浏览器兼容

除了IE10及以下不支持,其它浏览器全部兼容,包括移动端所有浏览器。如果您要使用hidden,您应在CSS中设置display: none; !important以确保内容在所有浏览器中都隐藏。

<div class="example" hidden></div>
  .example[hidden]{
    display:none !important;
  }

也可以使用属性选择器将其设置为全局样式。

[hidden] {
  display: none !important;
}

对了,属性选择器是支持浏览器IE7+的。

hidden属性javascript操作

文章开篇介绍过hidden属性是布尔属性。所以:

$(".example").hidden = false;//显示
$(".example").hidden = true;//隐藏

 

上一篇: CSS中制作三角形  下一篇: javascript Array数组对象简介  

全局属性hidden相关文章