javascript中 visibility和display的区别

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了javascript中 visibility和display的区别相关的知识,希望对你有一定的参考价值。

?? 感觉一样

区别:

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>

以上是关于javascript中 visibility和display的区别的主要内容,如果未能解决你的问题,请参考以下文章

javascript中 visibility和display的区别

javascript中 visibility和display区别在哪

Kendo Ui Dropdownlist Set Visible via Javascript

javascript 类.visible

javascript !mobile-menu-visible!搜索 - 可见

JavaScript错误说“确认不是函数”