<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>
Dhtml - 隐藏的两种方式
猜你喜欢
转载自cc-index.iteye.com/blog/1671635
今日推荐
周排行