javascript中 visibility和display的区别

发布时间:2025-05-25 05:09:25 发布人:远客网络

一、javascript中 visibility和display的区别

visibility要占用域的空间，而display则不占用。

visibility和display都可以实现对页的隐藏，例如：

将元素display属性设为 block，会在该元素后换行。

将元素display属性设为 inline，会消除元素换行。

将元素display属性设为 none，隐藏该元素内容，且不占用域的空间。

将元素visibility属性设为 hidden，隐藏该元素内容，但占用域的空间。

将元素visibility属性设为 visible，显示元素内容。

如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility：hidden。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display：none。

在现实中我发现人们更多的倾向于使用display属性（相信这也是大多数人的习惯）。当你决定用display：none来隐藏一个元素时，你必须知道其它内容将填充到该元素留下的空白位置，从而改变页面的布局。

在SEO中有时我们会通过把堆砌的关键词隐藏而达到作弊的目的，但不应该使用visibility：hidden和display：none，而应该把关键词颜色设为和背景色相同，或者把关键词的字号设为非常小，而令访客无法发现。

有的人则因为害怕搜索蜘蛛的的反感而为visibility：hidden和display：none的使用的烦恼。其实有很多漂亮的效果是通过元素可见性的转换而实现的。

搜索引擎也理解这一做法（事实上搜索引擎往往忽略CSS），因此如果你的目的不是欺骗搜索引擎，你大可以放心地使用visibility：hidden和display：none去隐藏内容。

二、javascript中visibility和display的区别

区别：JavaScript中的visibility和display属性在元素显示上有所不同。

1.定义与功能：display属性主要决定元素如何显示，例如块级元素、内联元素还是其他显示方式如flex、grid等。

2.主要影响：改变元素的display属性可以影响元素如何占据页面空间，以及与其他元素的布局关系。例如，将元素的display设置为“none”，该元素会从页面布局中完全移除，就像它从未存在过一样。

1.定义与功能：visibility属性决定元素是否可见，即使元素不可见，它仍然占据页面空间。这与display属性中的“none”值不同，因为使用“none”时元素不会占据任何空间。

2.主要影响：当元素的visibility设置为“hidden”时，虽然用户无法看到元素，但元素仍然存在于布局中，且不会影响页面的滚动行为。这意味着元素所占的空间不会被其他内容填充。

最重要的区别是display属性可以影响元素的布局和占据的空间，而visibility属性仅影响元素的可见性。如果将一个元素的display设置为“none”，那么这个元素就会从文档流中完全移除，无论其是否可见。而更改visibility属性只会影响元素的可见性，不会改变其在文档流中的位置或大小。因此，在设计响应式布局或进行复杂的页面排版时，理解并正确使用这两个属性是非常重要的。

总的来说，在JavaScript中，display和visibility属性都是用来控制元素显示特性的，但它们的作用方式和使用场景有所不同。开发者需要根据具体需求选择合适的属性进行调整。