javascript中 visibility和display的区别

Posted 2023-05-18

？？ 感觉一样

区别：

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

参考技术A

区别只有一点，在于用法不同，具体如下：

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

参考技术B

visibility和display的区别：

visibility被设置为"hidden"时，元素虽然被隐藏了，但它仍然占据它原来所在的位置。

display被设置为“none”时，元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填。

visibility的属性值为hidden时的运用：

代码：

效果：

点击第一行的文字之后的效果：

第一行中，visibility：hidden；仍会保留元素的位置，所以第二行的位置不会因为第一行的消失而发生改变。当元素被隐藏之后，就不能再接收到其它事件了，所以在第一行代码成为"hidden"的时候，就不能再接收响应到事件了，因此也就无法通过鼠标点击第一段文本令其显示出来。

display属性值为none时的运用：

JavaScript：

html：

效果：

点击“蓝色”文字之后的效果：

再次点击“蓝色”文字后的效果：

第三次点击“蓝色”文字后的效果：

所以说，display的属性值为none时，元素实际上就从页面中被移走，它下面所在的元素就会被自动跟上填充。

参考技术C 大多数人很容易将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>本回答被提问者采纳 参考技术D 比如你原来的DIV高度，宽度为 100 x 100,
用 visibility 这个区间还存在，
用 display 则不存在。

html JavaScript包括在页面是发布页面时在SharePoint中使用客户端代码。发布页面加载其JavaScript di

<script type="text/javascript" src="/_layouts/15/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js" ></script>