Dhtml - 隐藏的两种方式

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 225 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

[ Dhtml ] 专栏收录该内容

1 篇文章

订阅专栏

<html>
<head>
<style type="text/css">
.test1 { border: 5px solid orange; }
.test2 { margin-top: 10px; border: 5px solid; color: #f00; }
.test3 { margin-top: 10px; border: 5px solid; color: #000; }
</style>
<script type="text/javascript">
function bt1() {
	var btObj = document.getElementById("b1");
	if (btObj.value == "隐藏-A") {
		// 占据空间
		document.getElementById("t1").style.visibility = "hidden";
		btObj.value = "显示-A";
	} else {
		document.getElementById("t1").style.visibility = "visible";
		btObj.value = "隐藏-A";
	}
}

function bt2() {
	var btObj = document.getElementById("b2");
	if (btObj.value == "隐藏-B") {
		// 释放空间
		document.getElementById("t2").style.display = "none";
		btObj.value = "显示-B";
	} else {
		document.getElementById("t2").style.display = "block";
		btObj.value = "隐藏-B";
	}
}
</script>
</head>
<body>
<div id="t1" class="test1">隐藏且占据空间！</div>
<div id="t2" class="test2">隐藏并释放空间！</div>
<div id="t3" class="test3">GGGGGGGGGGGGGGGG</div><hr>
<input type="button" id="b1" value="隐藏-A" onclick="bt1()">
<input type="button" id="b2" value="隐藏-B" onclick="bt2()">
</body>
</html>