visibility和display区别

最新推荐文章于 2019-01-08 10:43:09 发布

my520530

最新推荐文章于 2019-01-08 10:43:09 发布

阅读量125

点赞数

分类专栏： JS 文章标签： visibility和display区别

本文链接：https://blog.csdn.net/my520530/article/details/84426871

版权

JS 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<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>