javascript中 visibility和display的区别
发布网友
发布时间：2022-04-23 00:58
共7个回答
热心网友
时间：2022-04-19 06:57
区别：
1、占用域的空间不同。
visibility要占用域的空间，而display则不占用。
visibility和display都可以实现对页的隐藏，例如：
将元素display属性设为 block，会在该元素后换行。
将元素display属性设为 inline，会消除元素换行。
将元素display属性设为 none，隐藏该元素内容，且不占用域的空间。
将元素visibility属性设为 hidden，隐藏该元素内容，但占用域的空间。
将元素visibility属性设为 visible，显示元素内容。
2、回应正常文档流的不同。
如果你想隐藏某元素，但在页面上保留该元素的空间的话，你应该使用visibility：hidden 。如果你想在隐藏某元素的同时让其它内容填充空白的话应该使用display：none 。
在现实中我发现人们更多的倾向于使用display 属性（相信这也是大多数人的习惯）。当你决定用display：none 来隐藏一个元素时，你必须知道其它内容将填充到该元素留下的空白位置，从而改变页面的布局。
扩展资料
在SEO中有时我们会通过把堆砌的关键词隐藏而达到作弊的目的，但不应该使用visibility：hidden 和display：none ，而应该把关键词颜色设为和背景色相同，或者把关键词的字号设为非常小，而令访客无法发现。
有的人则因为害怕搜索蜘蛛的的反感而为visibility：hidden 和display：none 的使用的烦恼。其实有很多漂亮的效果是通过元素可见性的转换而实现的。
搜索引擎也理解这一做法（事实上搜索引擎往往忽略CSS），因此如果你的目的不是欺骗搜索引擎，你大可以放心地使用visibility：hidden 和display：none 去隐藏内容。
参考资料：百度百科-Visibility
热心网友
时间：2022-04-19 08:15
区别只有一点，在于用法不同，具体如下：
visibility用法：
visibility="visible|hidden"（visible表示显示，hidden表示隐藏）。
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
display用法：
display="block|none|inline"。
当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块。。
将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。
这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。
扩展资料：
javascript特点
动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。在访问一个网页时,鼠标在网页中进行鼠标点击或上下移、窗口移动等操作JavaScript都可直接对这些事件给出相应的响应。
跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。
因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提上机器上的浏览器支持JavaScript脚本语言，目前JavaScript已被大多数的浏览器所支持。
不同于服务器端脚本语言，例如PHP与ASP，JavaScript主要被作为客户端脚本语言在用户的浏览器上运行，不需要服务器的支持。
所以在早期程序员比较青睐于JavaScript以减少对服务器的负担，而与此同时也带来另一个问题：安全性。
而随着服务器的强壮，虽然程序员更喜欢运行于服务端的脚本以保证安全，但JavaScript仍然以其跨平台、容易上手等优势大行其道。
参考资料来源：百度百科--Java 编程语言
参考资料来源：百度百科--javascript
热心网友
时间：2022-04-19 09:50
visibility和display的区别：
visibility被设置为"hidden"时，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
display被设置为“none”时，元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。
visibility的属性值为hidden时的运用：
代码：
效果：
点击第一行的文字之后的效果：
第一行中，visibility：hidden；仍会保留元素的位置，所以第二行的位置不会因为第一行的消失而发生改变。当元素被隐藏之后，就不能再接收到其它事件了，所以在第一行代码成为"hidden"的时候，就不能再接收响应到事件了，因此也就无法通过鼠标点击第一段文本令其显示出来。
display属性值为none时的运用：
JavaScript：
html：
效果：
点击“蓝色”文字之后的效果：
再次点击“蓝色”文字后的效果：
第三次点击“蓝色”文字后的效果：
所以说，display的属性值为none时，元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。
热心网友
时间：2022-04-19 11:41
大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。
visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。
当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例：
<script language="JavaScript"> function toggleVisibility(me){ if (me.style.visibility=="hidden"){ me.style.visibility="visible"; } else { me.style.visibility="hidden"; } } </script> <div onclick="toggleVisibility(this)" style="position:relative">第一行文本将会触发"hidden"和"visible"属性，注意第二行的变化。</div> <div>因为visibility会保留元素的位置，所以虽然第一行看不见了但位置还在，第二行内容不会上下移动。</div>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
注意到，当元素被隐藏之后，就不能再接收到其它事件了，所以在第一段代码中，当其被设为"hidden"的时候，就不能再接收响应到事件了，因此也就无法通过鼠标点击第一段文本令其显示出来。
另一方面，display属性就有一点不同了。visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。
当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。
将display设置为inline，将使其行为和元素inline一样---即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。
下面看我实例的代码和效果：
<script language="JavaScript"> function toggleDisplay(me){ if (me.style.display=="block"){ me.style.display="inline"; alert("文本现在是：'inline'."); } else { if (me.style.display=="inline"){ me.style.display="none"; alert("文本现在是:'none'. 3秒钟后自动重新显示。"); window.setTimeout("blueText.style.display='block';",3000,"JavaScript"); } else { me.style.display="block"; alert("文本现在是:'block'."); } } } </script> <div>在<span id="blueText" onclick="toggleDisplay(this)" style="color:blue;position:relative;cursor:hand;">蓝色</span>文字上点击来查看效果.</div>
[Ctrl+A 全部选择进行拷贝 提示：可先修改部分代码，再点击运行]
最后是display被设置：none，这时元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。（此时应用display: none;的元素相当于消失，而visibility: hidden;则只表示隐藏，位置还在。）
display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试示例：
<h1>display 属性分别为block, inline, none 值及使用visibility: hidden;的情况调试</h1> <P><SPAN id="oSpan" style="background-color: #CFCFCF;">This is a SPAN</SPAN> in a sentence.</P> <P> <input type=button value="Inline" onclick="oSpan.style.display='inline'"> <input type=button value="Block" onclick="oSpan.style.display='block'"> <input type=button value="None" onclick="oSpan.style.display='none'"> <input type=button value="Hidden" onclick="oSpan.style.visibility='hidden'"><input type=button value="Visible" onclick="oSpan.style.visibility='visible'"> </P> <UL> <LI>将元素设为 block，会在该元素后换行。</LI> <LI>将元素设为 inline，会消除元素换行。</LI> <LI>将元素设为 none，隐藏该元素内容。</LI> </UL>
热心网友
时间：2022-04-19 13:49
比如你原来的DIV高度，宽度为 100 x 100,
用 visibility 这个区间还存在，
用 display 则不存在。
热心网友
时间：2022-04-19 16:14
visibility隐藏后，仍然占据空间（效率高，不经常用）
display隐藏后，不占据空间（效率低，经常用）
热心网友
时间：2022-04-19 18:55
不一样，前者隐藏掉就取不到值了，后者还可以取值
