[英]What is the difference between visibility:hidden and display:none?
The CSS rules visibility:hidden
and display:none
both result in the element not being visible. CSS 规则
visibility:hidden
和display:none
都会导致元素不可见。 Are these synonyms?这些是同义词吗?
display:none
means that the tag in question will not appear on the page at all (although you can still interact with it through the dom). display:none
意味着有问题的标签根本不会出现在页面上(尽管你仍然可以通过 dom 与它交互)。 There will be no space allocated for it between the other tags.其他标签之间不会为它分配空间。
visibility:hidden
means that unlike display:none
, the tag is not visible, but space is allocated for it on the page. visibility:hidden
意味着与display:none
不同,标签不可见,但在页面上为其分配了空间。 The tag is rendered, it just isn't seen on the page.标记已呈现,只是在页面上看不到。
For example:例如:
test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test
Replacing [style-tag-value]
with display:none
results in:用
display:none
替换[style-tag-value]
导致:
test | | test
Replacing [style-tag-value]
with visibility:hidden
results in:将
[style-tag-value]
替换为visibility:hidden
导致:
test | | test
They are not synonyms.它们不是同义词。
display:none
removes the element from the normal flow of the page, allowing other elements to fill in. display:none
从页面的正常流中移除元素,允许其他元素填充。
visibility:hidden
leaves the element in the normal flow of the page such that is still occupies space. visibility:hidden
将元素留在页面的正常流中,这样它仍然占用空间。
Imagine you are in line for a ride at an amusement park and someone in the line gets so rowdy that security plucks them from the line.想象一下,您在游乐园排队等候兜风,而排队中的某个人非常吵闹,以至于保安将他们从队伍中拉了出来。 Everyone in line will then move forward one position to fill the now empty slot.
排队的每个人都将向前移动一个位置以填充现在空的位置。 This is like
display:none
.这就像
display:none
。
Contrast this with the similar situation, but that someone in front of you puts on an invisibility cloak.将此与类似的情况进行对比,但您面前的某个人穿上了隐形斗篷。 While viewing the line, it will look like there is an empty space, but people can't really fill that empty looking space because someone is still there.
在查看这条线时,它看起来像是一个空白的空间,但人们无法真正填补那个空白的空间,因为有人还在那里。 This is like
visibility:hidden
.这就像
visibility:hidden
。
One thing worth adding, though it wasn't asked, is that there is a third option of making the object completely transparent.尽管没有被问到,但值得添加的一件事是,还有第三种选项可以使对象完全透明。 Consider:
考虑:
1st <a href="http://example.com" style="display: none;">unseen</a> link.<br /> 2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br /> 3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.
(Be sure to click "Run code snippet" button above to see the result.) (一定要点击上面的“运行代码片段”按钮来查看结果。)
The difference between 1 and 2 has already been pointed out (namely, 2 still takes up space). 1 和 2 的区别已经指出(即 2 仍然占用空间)。 However, there is a difference between 2 and 3: in case 3, the mouse will still switch to the hand when hovering over the link, and the user can still click on the link, and Javascript events will still fire on the link.
但是,2 和 3 有一个区别:在第 3 种情况下,鼠标悬停在链接上时仍然会切换到手,并且用户仍然可以点击链接,并且 Javascript 事件仍然会在链接上触发。 This is usually not the behavior you want (but maybe sometimes it is?).
这通常不是您想要的行为(但有时可能是?)。
Another difference is if you select the text, then copy/paste as plain text, you get the following:另一个区别是,如果您选择文本,然后复制/粘贴为纯文本,您会得到以下内容:
1st link.
2nd link.
3rd unseen link.
In case 3 the text does get copied.在情况 3 中,文本确实被复制了。 Maybe this would be useful for some type of watermarking, or if you wanted to hide a copyright notice that would show up if a carelessly user copy/pasted your content?
也许这对某种类型的水印很有用,或者如果您想隐藏版权声明,如果用户不小心复制/粘贴了您的内容,则会显示该声明?
display:none
removes the element from the layout flow. display:none
从布局流中删除元素。
visibility:hidden
hides it but leaves the space. visibility:hidden
隐藏它但离开空间。
There is a big difference when it comes to child nodes.子节点有很大的不同。 For example: If you have a parent div and a nested child div.
例如:如果您有一个父 div 和一个嵌套的子 div。 So if you write like this:
所以如果你这样写:
<div id="parent" style="display:none;">
<div id="child" style="display:block;"></div>
</div>
In this case none of the divs will be visible.在这种情况下,所有 div 都不可见。 But if you write like this:
但是如果你这样写:
<div id="parent" style="visibility:hidden;">
<div id="child" style="visibility:visible;"></div>
</div>
Then the child div will be visible whereas the parent div will not be shown.然后子 div 将可见,而父 div 将不显示。
They're not synonyms - display: none
removes the element from the flow of the page, and rest of the page flows as if it weren't there.它们不是同义词 -
display: none
从页面流中删除元素,而页面的其余部分就好像它不存在一样流动。
visibility: hidden
hides the element from view but not the page flow, leaving space for it on the page. visibility: hidden
从视图中隐藏元素但不隐藏页面流,在页面上为其留出空间。
display: none
removes the element from the page entirely, and the page is built as though the element were not there at all. display: none
将元素从页面中完全移除,页面构建时就好像元素根本不存在一样。
Visibility: hidden
leaves the space in the document flow even though you can no longer see it. Visibility: hidden
在文档流中留下空间,即使您再也看不到它。
This may or may not make a big difference depending on what you are doing.这可能会或可能不会产生很大的不同,具体取决于您在做什么。
With visibility:hidden
the object still takes up vertical height on the page.使用
visibility:hidden
对象仍然占据页面上的垂直高度。 With display:none
it is completely removed.随着
display:none
它被完全删除。 If you have text beneath an image and you do display:none
, that text will shift up to fill the space where the image was.如果图像下方有文本并且确实
display:none
,则该文本将向上移动以填充图像所在的空间。 If you do visibility:hidden the text will remain in the same location.如果您执行可见性:隐藏文本将保留在同一位置。
display:none
will hide the element and collapse the space is was taking up, whereas visibility:hidden
will hide the element and preserve the elements space. display:none
将隐藏元素并折叠占用的空间,而visibility:hidden
将隐藏元素并保留元素空间。 display:none also effects some of the properties available from javascript in older versions of IE and Safari. display:none 还会影响旧版本的 IE 和 Safari 中 JavaScript 提供的一些属性。
visibility:hidden
preserves the space; visibility:hidden
保留空间; display:none
doesn't. display:none
没有。
In addition to all other answers, there's an important difference for IE8: If you use display:none
and try to get the element's width or height, IE8 returns 0 (while other browsers will return the actual sizes).除了所有其他答案之外,IE8 还有一个重要区别:如果您使用
display:none
并尝试获取元素的宽度或高度,IE8 将返回 0(而其他浏览器将返回实际大小)。 IE8 returns correct width or height only for visibility:hidden
. IE8 只为
visibility:hidden
返回正确的宽度或高度visibility:hidden
。
display: none;
It will not be available on the page and does not occupy any space.它不会出现在页面上,也不占用任何空间。
visibility: hidden;
it hides an element, but it will still take up the same space as before.它隐藏了一个元素,但它仍然会占用与以前相同的空间。 The element will be hidden, but still, affect the layout.
该元素将被隐藏,但仍会影响布局。
visibility: hidden
preserve the space, whereas display: none
doesn't preserve the space. visibility: hidden
保留空间,而display: none
保留空间。
Display None Example: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none无显示示例: https : //www.w3schools.com/css/tryit.asp?filename=trycss_display_none
Visibility Hidden Example : https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility可见性隐藏示例: https : //www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility
visibility:hidden
will keep the element in the page and occupies that space but does not show to the user. visibility:hidden
将元素保留在页面中并占用该空间但不向用户显示。
display:none
will not be available in the page and does not occupy any space. display:none
在页面中将不可用并且不占用任何空间。
If visibility property set to "hidden"
, the browser will still take space on the page for the content even though it's invisible.如果可见性属性设置为
"hidden"
,即使内容不可见,浏览器仍会占用页面上的空间。
But when we set an object to "display:none"
, the browser does not allocate space on the page for its content.但是当我们将一个对象设置为
"display:none"
,浏览器不会在页面上为其内容分配空间。
Example:例子:
<div style="display:none">
Content not display on screen and even space not taken.
</div>
<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>
display: none显示:无
It will remove the element from the normal flow of the page, allowing other elements to fill in.它将从页面的正常流中删除元素,允许其他元素填充。
An element will not appear on the page at all but we can still interact with it through the DOM.元素根本不会出现在页面上,但我们仍然可以通过 DOM 与它进行交互。 There will be no space allocated for it between the other elements.
其他元素之间不会为它分配空间。
visibility: hidden可见性:隐藏
It will leave the element in the normal flow of the page such that is still occupies space.它将元素留在页面的正常流中,这样它仍然占用空间。
An element is not visible and Element's space is allocated for it on the page.元素不可见,并且在页面上为其分配了元素空间。
Some other ways to hide elements隐藏元素的其他一些方法
Use z-index使用z-index
#element {
z-index: -11111;
}
Move an element off the page将元素移出页面
#element {
position: absolute;
top: -9999em;
left: -9999em;
}
Interesting information about visibility: hidden and display: none properties关于可见性的有趣信息:隐藏和显示:无属性
visibility: hidden
and display: none
will be equally performant since they both re-trigger layout, paint and composite. visibility: hidden
和display: none
性能相同,因为它们都重新触发布局、绘制和合成。 However, opacity: 0
is functionality equivalent to visibility: hidden
and does not re-trigger the layout step.但是,
opacity: 0
的功能等同于visibility: hidden
并且不会重新触发布局步骤。
And CSS-transition property is also important thing that we need to take care. CSS-transition 属性也是我们需要注意的重要事情。 Because toggling from
visibility: hidden
to visibility: visible
allow for CSS-transitions to be use, whereas toggling from display: none
to display: block
does not.因为从
visibility: hidden
切换到visibility: visible
允许使用 CSS 转换,而从display: none
切换到display: block
则不允许。 visibility: hidden
has the additional benefit of not capturing JavaScript events, whereas opacity: 0
captures events visibility: hidden
具有不捕获 JavaScript 事件的额外好处,而opacity: 0
捕获事件
Summarizing all the other answers:总结所有其他答案:
visibility![]() |
display![]() |
---|---|
element with visibility: hidden, is hidden for all practical purposes (mouse pointers, keyboard focus, screenreaders), but still occupies space in the rendered markup![]() |
element with display:none, is hidden for all practical purposes (mouse pointers, keyboard focus, screenreaders), and DOES NOT occupy space in the rendered markup![]() |
css transitions can be applied for visibility changes ![]() |
css transitions can not be applied on display changes ![]() |
you can make a parent visibility:hidden but a child with visibility: visible would still be shown![]() |
when parent is display:none, children can't override and make themselves visible![]() |
part of the DOM tree (so you can still target it with DOM queries) ![]() |
part of the DOM tree (so you can still target it with DOM queries) ![]() |
part of the render tree![]() |
NOT part of the render tree![]() |
any reflow / layout in the parent element or child elements, would possibly trigger a reflow in these elements as well, as they are part of the render tree.![]() |
any reflow / layout in the parent element, would not impact these elements, as these are not part of the render tree![]() |
toggling between visibility: hidden and visible, would possibly not trigger a reflow / layout.![]() ![]() |
toggling between display:none to display: (something else), would lead to a layout /reflow as this element would now become part of the render tree![]() |
you can measure the element through DOM methods![]() |
you can not measure the element or its descendants using DOM methods![]() |
If you have a huge number of elements using visibility: none on the page, the browser might hang while rendering, as all these elements require layout, even though they are not shown![]() |
If you have a huge number of elements using display:none, they wouldn't impact the rendering as they are not part of the render tree![]() |
One other difference is that visibility:hidden
works in really, really old browsers, and display:none
does not:另一个区别是
visibility:hidden
在非常非常旧的浏览器中工作,而display:none
:
https://www.w3schools.com/cssref/pr_class_visibility.asp https://www.w3schools.com/cssref/pr_class_visibility.asp
https://www.w3schools.com/cssref/pr_class_display.asp https://www.w3schools.com/cssref/pr_class_display.asp
The difference goes beyond style and is reflected in how the elements behave when manipulated with JavaScript.差异超越了样式,并反映在使用 JavaScript 操作时元素的行为方式。
Effects and side effects of display: none
: display: none
效果和副作用display: none
:
clientWidth
, clientHeight
, offsetWidth
, offsetHeight
, scrollWidth
, scrollHeight
, getBoundingClientRect()
, getComputedStyle()
, all return 0
s.clientWidth
、 clientHeight
、 offsetWidth
、 offsetHeight
、 scrollWidth
、 scrollHeight
、 getBoundingClientRect()
、 getComputedStyle()
,都返回0
s。 Effects and side-effects of visibility: hidden
: visibility: hidden
影响和副作用visibility: hidden
:
innerText
(but not innerHTML
) of the target element and descendants returns empty string.innerText
(但不是innerHTML
)返回空字符串。 As described elsewhere in this stack, the two are not synonymous.如本堆栈中其他地方所述,两者不是同义词。
visibility:hidden
will leave space on the page whereas display:none
will hide the element entirely. visibility:hidden
将在页面上留下空间,而display:none
将完全隐藏元素。 I think it's important to talk about how this affects the children of a given element.我认为讨论这如何影响给定元素的子元素很重要。 If you were to use
visibility:hidden
then you could show the children of that element with the right styling.如果您要使用
visibility:hidden
那么您可以使用正确的样式显示该元素的子元素。 But with display:none
you hide the children regardless of whether you use display: block | flex | inline | grid | inline-block
但是使用
display:none
无论您是否使用display: block | flex | inline | grid | inline-block
都可以隐藏子项。 display: block | flex | inline | grid | inline-block
display: block | flex | inline | grid | inline-block
or not. display: block | flex | inline | grid | inline-block
与否。
display:none;
will neither display the element nor will it allot space for the element on the page whereas visibility:hidden;
既不会显示元素,也不会为页面上的元素分配空间,而
visibility:hidden;
will not display the element on the page but will allot space on the page.不会在页面上显示元素,但会在页面上分配空间。 We can access the element in DOM in both cases.
在这两种情况下,我们都可以访问 DOM 中的元素。 To understand it in a better way please look at the following code: display:none vs visibility:hidden
要更好地理解它,请查看以下代码: display:none vsvisibility:hidden
There are a lot of detailed answers here, but I thought I should add this to address accessibility since there are implications.这里有很多详细的答案,但我认为我应该添加它来解决可访问性问题,因为有一些含义。
display: none;
and visibility: hidden;
和
visibility: hidden;
may not be read by all screen reader software.并非所有屏幕阅读器软件都可以阅读。 Keep in mind what visually-impaired users will experience.
请记住视障用户会体验到什么。
The question also asks about synonyms.该问题还询问同义词。
text-indent: -9999px;
is one other that is roughly equivalent.是另一个大致等效的。 The important difference with
text-indent
is that it will often be read by screen readers.与
text-indent
的重要区别在于它通常会被屏幕阅读器阅读。 It can be a bit of a bad experience as users can still tab to the link.这可能是一种糟糕的体验,因为用户仍然可以使用 Tab 键访问链接。
For accessibility, what I see used today is a combination of styles to hide an element while being visible to screen readers.对于可访问性,我今天看到的使用样式组合来隐藏元素同时对屏幕阅读器可见。
{
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
A great practice is to create a "Skip to content" link to the anchor of the main body of content.一个很好的做法是创建一个“跳到内容”链接到内容主体的锚点。 Visually-impaired users probably don't want to listen to your full navigation tree on every single page.
视障用户可能不想在每个页面上收听完整的导航树。 Make the link visually hidden.
使链接在视觉上隐藏。 Users can just hit tab to access the link.
用户只需点击标签即可访问链接。
For more on accessibility and hidden content, see:有关可访问性和隐藏内容的更多信息,请参阅:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.