`
cc_index
  • 浏览: 5284 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

Dhtml - 隐藏的两种方式

 
阅读更多 
<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>

 

分享到：
JavaScript - select对象的option清空、添 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics