display: none与visibility: hidden的区别

这篇具有很好参考价值的文章主要介绍了display: none与visibility: hidden的区别。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

引言:

在前端面试中,一般比较侧重JavaScript方面的考察,CSS布局方面考察的内容会相对少一些,其中display: none与visibility: hidden的区别是较常见的考点,这两个css配置都可以从视觉上隐藏DOM元素,那这两者的使用上有什么区别呢?

display: none

首先我们来看W3C中对display: none的描述:

'none'

​ The element and its descendants generate no boxes or text sequences.

​ Similarly, if a text node is defined to behave as display: none, it generates no text sequences.

Elements with either of these values do not have inner or outer display types, because they don’t generate any boxes at all.

NOTE: As these values cause affected elements to not generate a box, anonymous box generation rules will ignore the elided elements entirely, as if they did not exist in the box tree.

简单翻译一下:

元素及其后代不生成盒子或文本序列。

同样,如果文本节点被定义为display: none,它就不会生成文本序列。

具有上述任一值(指none和contents,W3C的文档中这两者放在同一小节)的元素都没有内部或外部显示类型,因为它们根本不会生成任何盒子。

注意:由于这些值会导致受影响的元素不生成盒子,因此匿名盒子生成规则会完全忽略被省略的元素,就好像它们不存在于盒子树中一样。

根据上面这段描述可以看出,给元素设置display: none后,该元素及其后代都不会生成盒子和文本序列,也就是在渲染树上不会有这个元素对应的节点。

visibility: hidden

首先我们看visibility属性本身的描述:

The visibility property specifies whether the box is rendered. Invisible boxes still affect layout.

意思是:

可见性属性指定是否渲染盒子。不可见的盒子仍会影响布局。

接着继续看visibility: hidden的描述:

hidden

Any boxes generated by the element are invisible. Descendants of the element can, however, be visible if they have visibility: visible.

意思是:

该元素生成的任何盒子都是不可见的。然而,该元素的后代如果设置为visibility: visible,则就是可见的。

根据上面这段描述,可以看出,给元素设置为visibility: hidden后,该元素也会生成盒子,所以仍会影响布局,只是不可见(没有被绘制),并且后代元素可以控制自己是否可见;也就是说后代是可能被显示到页面上的,因此渲染树上会有其对应的节点,只是这个元素本身是不可见的,类似透明。

我们可以看到W3C中还有下面一段描述:

Invisible boxes are not rendered (as if they were fully transparent), cannot be interacted with (and behave as if they had pointer-events: none), are removed from navigation (similar to display: none), and are also not rendered to speech (except when speak is always [CSS-SPEECH-1]). However, as with display: contents, their semantic role as a container is not affected, to ensure that any visible descendants are properly interpreted.

翻译一下意思是:

隐形盒子不会被呈现(就像完全透明一样)、无法与之交互(行为类似于设置了pointer-events: none)、被从导航中移除(类似于display: none),也不会呈现为语音(除非speak被设置为always [CSS-SPEECH-1])。不过,与display: contents一样,它们作为容器的语义作用不会受到影响,以确保任何可见后代都能得到正确的解释。

我看了一下,大概意思差不多理解,但是其中“被从导航中移除”这个不太理解,原本以为是设置锚点不能跳转,但是尝试了一下,发现是可以的,所以又查阅了一下MDN的说法:MDN-visibility

hidden

The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible. The element cannot receive focus (such as when navigating through tab indexes).

大致意思就是:

不能被聚焦(比如通过tabindex这个属性)。

tabindex这个属性可以使HTML元素获得焦点,比如:

display: none与visibility: hidden的区别

我们可以通过tab键使设置了tabindex的元素获得焦点,也可以直接点击这个元素使它获得焦点;那么也就是说如果元素设置了visibility: hidden,即使设置了tabindex属性,也无法获取焦点。

另外后面这段内容,我觉得也可以帮助理解,

Using a visibility value of hidden on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.

它的意思是,设置了hidden的元素将从可访问树上被移除,其中的内容无法被无障碍阅读设备读取,总体来说,就是将这个被设置了visibility: hidden的元素当做完全不存在,直接跳过,在页面审查元素的时候,也无法选中这个元素。

两者对比

从上述的定义中,可以看出,两者在渲染时,主要有两个区别:

  • 第一,是对后代元素是否可见的可控性,visibility: hidden无法完全控制后代的可见性
  • 第二,是是否参与布局计算,从定义中完全可以看出,元素即使设置了visibility: hidden,依旧会生成盒子,会参与布局的计算

最主要的就在于,设置了display: none的元素只有对应的DOM树上的节点,没有生成渲染树的节点;而设置了visibility: hidden属性的元素,在渲染树上有对应的节点。

那么在使用上要怎么选择呢?

首先我们可以考虑,是否由元素完全控制其后代的可见性,如果答案是否,那么display: none就可以排除了。

其次我们还要考虑一件事,就是通常来说,如果某个元素页面上不需要展示,我们直接可以不写,但既然我们写了,那么这个隐藏元素就可能出现在页面上,也就是说显示/隐藏的状态会发生切换。

这个时候我们就要考虑回流重排的问题,因为元素在设置display: none时不参与布局的计算,在状态切换为显示时,又会参与布局,这就会使渲染树的节点发生改变,导致触发浏览器回流并重新生成渲染树;频繁的切换状态就会导致频繁地触发回流重排,影响页面渲染性能,所以在有状态切换的场景,尤其是频繁切换,更推荐优先使用visibility: hidden

并且使用visibility: hidden还可以设置一些过渡的显示效果(transition)。

还要注意一个问题,就是元素设置visibility: hidden后,就无法与之交互,如果遇到一些特殊的业务需求,比如需要与不可见元素发生交互,或者能够被无障碍阅读设备读取,这个时候就不能这样用了,这个时候可以考虑使用opacity: 0,将元素的透明度设置为0,这样除了变成完全透明,其他方面与普通元素没什么不同。

display: none这么多缺点,是不是就要抛弃不用呢? 那倒也不是这么绝对,比如有种情况,在页面加载的时候,根据某些值来判断是否显示某个元素,并且后续基本很少切换状态,那简单使用display: none也是没有问题的。

可以用以下比喻来帮助理解

opacity: 0是玻璃(固态,有形),虽然看不见,但是摸得着(可以获得焦点)

width: 0是水(液态),但摸得着(可以获得焦点),触碰它可以直接穿透,相当于没有宽度

visibility: hidden是空气(气态,无形),虽然看不见也摸不着(无法获得焦点),但是是真实存在的气态物质

以上三种都是存在的物质,固体和液体可以摸得着(获得焦点),但是气体摸不着(无法获得焦点);所以在渲染树上都会存在。

而display: none可以理解成没有肉身,只有能量态,比如一个按钮被设为display: none,它仍旧可以被触发点击事件,它这个能量(功能)还存在。文章来源地址https://www.toymoban.com/news/detail-710185.html

到了这里,关于display: none与visibility: hidden的区别的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • selenium爬虫遇见 display:none元素解决方法

    在爬虫过程中,html页面为了页面简洁美观,某些元素设置了不可见,需要鼠标点击或者悬浮才能展示,导致在爬虫过程中通过XPATH或CSS选择器定位元素时,报错无法找到。 下图是爬取牛客网一些招聘信息时的截屏 定义了一个js变量,然后通过getElementById()或getElementsByClassName

    2024年02月11日
    浏览(34)
  • 详细讲解!selenium:解决页面元素display:none的方法

    目录 前言: 1、具体问题 2、解决方案 代码解析: 结尾: 前言: 在进行 Web 自动化测试时,页面元素的可见性对测试结果的准确性和稳定性至关重要。然而,有些时候页面元素会被设置为  display:none ,导致自动化测试无法找到或与之交互。 这篇博客,介绍下如何通过JavaS

    2024年02月09日
    浏览(38)
  • wx:if和hidden 的区别

    wx:if和hidden都是用来控制微信小程序中的元素是否显示 !wx:if   wx:if 是惰性的,初始条件为false时,框架什么也不做,在条件第一次为true时才开始局部渲染。     此时如果isShow这个条件为false 那么图中的盒子将不会显示。  !hidden hidden:组件始终都会被渲染,只是根据变量来简

    2024年02月15日
    浏览(26)
  • 小程序wx:if和hidden的区别?

    wx:if : wx:if  是一个完整的条件渲染指令,当它的表达式为真时,才会渲染该指令所在的元素。如果表达式的值为假,则不会渲染该元素。这意味着在表达式为假时,该元素及其子元素都不会被渲染,就像它们从未存在过一样。 例如: hidden : hidden  是一个布尔属性,用于控

    2024年02月02日
    浏览(39)
  • 前端面试之TCP与UDP区别

    原文合集地址如下,有需要的朋友可以关注 本文地址 TCP(Transmission Control Protocol)是计算机网络中最常用的传输层协议之一,它提供了可靠的、面向连接的数据传输服务。TCP负责将应用层的数据分割成合适的数据包,并确保这些数据包按照正确的顺序到达目标主机。下面详细

    2024年02月11日
    浏览(31)
  • 前端面试:Vue和小程序的区别

    生命周期不一样: 1)小程序生命周期:onLoad页面加载、onShow页面显示、onReady页面初次渲染完成、onHide页面隐藏、onUnload页面卸载 2)vue生命周期:data、mouted、beforeupdate、updated、beforedestory、destroyed 数据请求时间不一样: 1)小程序在onLoad或者onShow中请求数据 2)Vue在created或

    2024年02月08日
    浏览(39)
  • 前端经典面试题 | Computed 和 Watch 的区别

    🖥️ 前端经典面试题专栏:前端经典面试题 | Computed 和 Watch 的区别 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、回答点 二、深入回

    2024年02月21日
    浏览(43)
  • 前端面试题---TCP和UDP的区别、POST和GET请求的区别

    TCP(传输控制协议)和UDP(用户数据报协议)是两种互联网协议,用于在计算机网络中传输数据。 连接性:TCP 是面向连接的协议,而 UDP 是无连接的协议。TCP 在通信之前需要建立连接,而 UDP 不需要建立连接即可直接发送数据。 可靠性:TCP 提供可靠的数据传输,它使用序号

    2024年02月13日
    浏览(39)
  • 前端面试官:介绍一下less和scss,以及他们的区别

    Less是一种CSS预处理器,它扩展了纯CSS的功能,提供了更多的功能和灵活性。Less语法与常规CSS语法非常相似,但引入了一些新的特性和语法规则,使得样式表的编写更加简洁和可维护。 以下是一些Less语法的特点和用法: 变量(Variables):你可以使用 @ 符号来定义和引用变量

    2024年02月08日
    浏览(48)
  • 前端经典面试题 | 吊打面试官系列 之 Vue2和Vue3的区别

    🖥️ 前端经典面试题 吊打面试官 专栏:Vue2和Vue3的区别 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、回答点 二、深入回答 监测机制

    2024年01月16日
    浏览(46)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包