如何隐藏DOM元素

特别声明:本站已开启付费阅读,年费会员价 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

早在2011年整理了一篇有关于图片替换文本的方法,而前几天看到一篇有关于隐藏DOM元素的几种方法。今天这里也将继续说说如何隐藏DOM元素?

隐藏DOM元素方法

在《用 CSS 隐藏页面元素的 5 种方法》一文中介绍了五种方法隐藏DOM元素,并且剖析了它们之间的差异。这里也再回顾一下,在CSS中,要隐藏DOM元素常见的方法有:

  • 设置元素的opacity值为0
  • 设置元素的visibility值为hidden
  • 设置元素的display值为none
  • 设置元素的position值为absolute,并且将其移到不可见区域
  • 设置元素clip(在新的CSS中使用clip-path来替代clip

除此之外,还可以使用:

  • 设置元素的hidden

上面隐藏元素的方法都是大家常见的,也是众所周之的。当然除此之外还有一些特殊的小技巧,比如说:

  • 将元素的font-sizeline-heightwidthheight设置为0
  • 设置元素的transformtranslateX或者translateY的值为-100%

当然,或许在你的实战经验当中,你还有别的方案。对于其他的方案,我们不再罗列,咱们具体来看看各种隐藏DOM元素的差异。

隐藏DOM元素的差异性

上面简单的罗列了八种隐藏DOM元素的方式,其实给我们视觉上的效果,这些方法都可以让元素不可见(也就是我们所说的隐藏)。然而,屏幕并不是唯一的输出机制,比如说,屏幕上看不见的元素(隐藏的元素),但其中一些隐藏元素的方式在屏幕阅读器中并没有隐藏,它依然能被屏幕阅读器读出来(因为屏幕阅读器依赖于可访问性树来阐述)。为了消除它们之间的歧意,我们将使用以下条款:

  • 完全隐藏:元素既不在屏幕上可见,而且也不暴露在可访问性树上
  • 语义上隐藏:元素在屏幕上呈现,但不暴露在可访问性树上
  • 视觉上隐藏:元素没有在屏幕上呈现,但是暴露在可访问性树上

三种类型的隐藏总结下来如下表所示:

可见性状态 屏幕上 可访问性树
完全隐藏 隐藏 隐藏
语义上隐藏 可见 隐藏
视觉上隐藏 隐藏 可见

如何完全隐藏元素

针对上面所列的隐藏元素方式当中,能完全隐藏元素的方法有三种:

  • 通过CSS设置元素的display属性值为none
  • 通过CSS设置元素的visibility属性值为hidden
  • 通过HTML5元素的属性值hidden(就是
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css/hidden-dom-element.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部