JS中style.display和style.visibility的区别实例说明_javascript技巧

来源：动视网责编：小采时间：2020-11-27 21:07:57

JS中style.display和style.visibility的区别实例说明_javascript技巧

JS中style.display和style.visibility的区别实例说明_javascript技巧:在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素被隐藏。它

推荐度：

点击下载本文 文档为doc格式

导读JS中style.display和style.visibility的区别实例说明_javascript技巧:在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素被隐藏。它

在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素被隐藏。它们之间最大的区别是通过style.display=none隐藏的时候，元素不占据原来的位置，从文档流中脱离，后续的元素填补其位置。通过style.visibility=hidden隐藏的时候，元素仍然占据原来的位置，只是被隐藏。

下面的例子说明了这种区别：在这个例子中，divContent1和divContent2隐藏的时候用的是style.display=none，这时候，后面的div会向上移动，占据已经隐藏的div的空间。divContent3和divContent4用的是style.visibility=hidden来隐藏，但是其隐藏后仍然占据原来的空间。

<html> <head> <title>test</title> <meta http-equiv=content-type content="text/html; charset=gb2312"> <style> .titlediv{background-color: #505050;color:white;font-weight:bold;padding:10px;cursor:pointer } .contentdiv{border:3px solid #505050;height:100px;padding:10px; } </style> function toggle(divid){ var odiv = document.getElementById(divid); odiv.style.display=(odiv.style.display=="none")?"block":"none"; } function showhide(divid){ var odiv = document.getElementById(divid); odiv.style.visibility=(odiv.style.visibility=="visible")?"hidden":"visible"; } </ script> </head> <body > click here(内容部分会隐藏，下面的内容会上来) this is some content to show and hide click here this is some content to show and hide click here(内容部分会隐藏，下面的内容不会上来) this is some content to show and hide click here this is some content to show and hide </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

JS中style.display和style.visibility的区别实例说明_javascript技巧

推荐度：

点击下载本文 文档为doc格式

标签：的区别 style js中

热门焦点

JS中style.display和style.visibility的区别实例说明_javascript技巧

JS中style.display和style.visibility的区别实例说明_javascript技巧

JS中style.display和style.visibility的区别实例说明_javascript技巧

最新推荐

猜你喜欢

热门推荐