Dhtml - 隐藏的两种方式

最新推荐文章于 2024-06-14 15:02:13 发布

iteye_13697

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量179

点赞数

分类专栏： [ Dhtml ] 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/iteye_13697/article/details/82406853

版权

[ Dhtml ] 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<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" οnclick="bt1()">
<input type="button" id="b2" value="隐藏-B" οnclick="bt2()">
</body>
</html>

iteye_13697

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Dhtml - 隐藏的两种方式

&lt;html&gt;&lt;head&gt;&lt;style type="text/css"&gt;.test1 { border: 5px solid orange; }.test2 { margin-top: 10px; border: 5px solid; color: #f00; }.test3 { margin-top: 10px; border: 5px so...
复制链接

扫一扫