有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下：
-
<html>
-
<head>
-
<title>HTML元素的显示与隐藏控制</title>
-
<scripttype="text/javascript">
-
functionshowAndHidden1(){
-
vardiv1=document.getElementById("div1");
-
vardiv2=document.getElementById("div2");
-
if(div1.style.display=='block')div1.style.display='none';
-
elsediv1.style.display='block';
-
if(div2.style.display=='block')div2.style.display='none';
-
elsediv2.style.display='block';
-
}
-
-
functionshowAndHidden2(){
-
vardiv3=document.getElementById("div3");
-
vardiv4=document.getElementById("div4");
-
if(div3.style.visibility=='visible')div3.style.visibility='hidden';
-
elsediv3.style.visibility='visible';
-
if(div4.style.visibility=='visible')div4.style.visibility='hidden';
-
elsediv4.style.visibility='visible';
-
}
-
</script>
-
</head>
-
<body>
-
<div>display：元素的位置不被占用</div>
-
<divid="div1"style="display:block;">DIV1</div>
-
<divid="div2"style="display:none;">DIV2</div>
-
<inputtype="button"onclick="showAndHidden1();"value="DIV切换"/>
-
<hr>
-
<div>visibility：元素的位置仍被占用</div>
-
<divid="div3"style="visibility:visible;">DIV3</div>
-
<divid="div4"style="visibility:hidden;">DIV4</div>
-
<inputtype="button"onclick="showAndHidden2();"value="DIV切换"/>
-
</body>
-
</html>
-
分享到：
相关推荐
CSS隐藏元素 display visibility opacity的区别 display:none和visibility:hidden的区别 对比总结： height:0和overflow:hidden的组合
需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现，感兴趣的朋友可以了解下本
display与visibility的区别
有些时候我们需要根据某些条件来控制Web页面中的HTML元素显示还是隐藏，可以通过display或visibility来实现。通过下面的例子了解display和visibility的区别，简单的例子代码如下： 复制代码代码如下: <html> ...
利用来JS控制页面控件显示和隐藏有两种方法，两种方法分别利用HTML的style中的两个属性，两种方法的不同之处在于控件隐藏后是否还在页面上占空位。 方法一： document.getElementById("EleId").style.visibility=...
display会将元素隐藏掉，并且位置不再被占据，而visibility则是占据原来的位置。 看例子即可明白： 代码如下: ”myDiv” xss=removed> <p> </p> </div> <input type=”button” onclick=”isVisibility(doc
visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。 当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的...
在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素...
隐藏元素——none二.是否显示——visibility三.定位——position1.基本概念2.静态定位——static3.固定定位——Fixed Positioning4.相对定位——Relative Position5. 绝对定位——Absolute Position6.自我总结，代码...
我们可以使用这个方法来获取元素，然后使用该元素的方法和属性来控制文字的显示与隐藏。 JavaScript 中的 Style 属性 在上面的示例中，我们使用了 `style` 属性来控制文字的显示与隐藏。`style` 属性是一个对象，...
NULL 博文链接：https://johnson-gong.iteye.com/blog/2152336
本文主要介绍了display和visibility的区别。具有很好的参考价值。下面跟着小编一起来看下吧
css中display和visibility可以隐藏和显示html元素包括DIV层。看起来两者非常类似，很多人会搞混。下面分别介绍两者的属性： display:none|block; display:none; 隐藏该html元素，确切的说，是在浏览器中消除该元素，...
visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示， visible表示显示， hidden表示（仅）隐藏，不可恢复。 当visibility被设置为"hidden"的时候，元素虽然被隐藏了， 1、仍然...
复制代码代码如下:{ display: none; /* 不占据空间，无法点击 */ } { visibility: hidden; /* 占据空间，无法点击 */ } { position: absolute; top: -999em; /* 不占据空间，无法点击 */ } { position: relative; ...