<html>
<head>
<title>测试visibility和display</title>
<script language="javascript">
function showPanle(flag) {
var textDan = document.getElementById("text-dan");
if (!flag) {
textDan.style.visibility = "hidden"; // 隐藏指定的区域(注:只是这个区域不显示)
} else {
textDan.style.visibility = "visible"; // 显示隐藏的区域
}
}
function playPanle(flag) {
var loveDan = document.getElementById("love-dan");
if (!flag) {
loveDan.style.display = "none"; // 去掉指定的区域(注:和visibility的区别)
} else {
loveDan.style.display = "block";
}
}
function test(flag) {
var love = document.all("love"); // 也可以这么弄: document.getElementById("love");
if (!flag) {
love.style.visibility = "hidden"; // 隐藏指定的区域(注:只是这个区域不显示)
} else {
love.style.visibility = "visible"; // 显示隐藏的区域
}
}
</script>
</head>
<body>
<div id="text-dan">
<h1>阿妹!阿哥想你!</h1>
</div>
<input type="button" onClick="showPanle(false);" value="隐藏">
<input type="button" onClick="showPanle(true);" value="显示">
<p> </p>
<div id="love-dan">
<h1>真的好想你!</h1>
</div>
<input type="button" onClick="playPanle(false);" value="隐藏">
<input type="button" onClick="playPanle(true);" value="显示">
<p> </p>
<div id="love">
<h1>爱!</h1>
</div>
<input type="button" onClick="test(false);" value="隐藏">
<input type="button" onClick="test(true);" value="显示">
</body>
</html>
相关推荐
display与visibility的区别
CSS隐藏元素 display visibility opacity的区别 display:none和visibility:hidden的区别 对比总结： height:0和overflow:hidden的组合
CSS：Visibility和Display属性的比较.pdf
display通常可以设置为none、inline、block visibility通常可以设置为hidden、visible 当display为none，visibility为hidden时，元素都会不见。不过其还有不同之处。 display会将元素隐藏掉，并且位置不再被占据，而...
visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，hidden表示隐藏）。
JS中style.display和style.visibility的区别实例说明.docx
本文主要介绍了display和visibility的区别。具有很好的参考价值。下面跟着小编一起来看下吧
...
在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示，在style.display=block和style.visibility=visible的时候，元素被显示，在style.display=none和style.visibility=hidden的时候，元素...
NULL 博文链接：https://johnson-gong.iteye.com/blog/2152336
大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。 visibility属性用来确定元素是显示还是隐藏的，这用visibility="visible|hidden"来表示（visible表示显示，...
前言： 在使用css隐藏栏位或物件的时候， 常常会使用到display:none和visibility:hidden这两个属性， 但却很容易分不清楚这两个的差别， 或是乾脆同时使用两种属性，来确保物件一定被隐藏， 其实我们可以很简单的来...
Display的属性值 block：/*表现为...将display设置为inline，将使其行为和元素inline一样—即使它是普通的块元素如，它也将会被组合成像那样的输出流。none:/*元素不可见，并且不为其保留相应的位置*/最后是display被
visiblity:hidden和display:none属性之间的差异
div和span、relative和absolute、display和visibility是很容易混淆和弄错的HTML标签与CSS属性，今天52CSS.com简单的罗列出它们的区别与使用要点，供大家参考。