javaScript隐藏与显示visibility和display属性的区别

来源：互联网发布：新浪微博程序员编辑：程序博客网时间：2024/06/04 18:43

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 隐藏层之后位置不变
*/
function getDiv1() {
var div1 = document.getElementById("div1");
if(div1.style.visibility == "hidden"){
div1.style.visibility = "visible";
}else{
div1.style.visibility = "hidden";
}
}

/*
* 隐藏层之后位置自动补齐
*/
function getDiv2(){

var div2 = document.getElementById("div2");

if(div2.style.display == "block"){

div2.style.display = "none";
}else{
div2.style.display = "block";
}
}
</script>
</head>

<body>
<div id="div1" style="width: 100%;height: 200px;border: 1px solid #8A2BE2;">
111111
</div>
<input type="button" onclick="getDiv1()" id="btn1" value="显示/隐藏" />

<div id="div2" style="width: 100%;height: 200px;border: 1px solid #8A2BE2;margin-top: 10px;">
22222
</div>
<input type="button" onclick="getDiv2()" value="显示/隐藏"/>

<div style="width: 100%;height: 100px;border: 1px solid #8A2BE2;margin-top: 10px;">
3333333
</div>
</body>

</html>

阅读全文

0 0