您的位置：首页 > Web前端 > HTML

隐藏和显示div的两种方法（display和visibility）

2012-07-05 20:05 387 查看

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
.yangshi1{
width:200px;
height:200px;
background-color:red;
}
.yangshi2{
width:300px;
height:300px;
background-color:blue;
}
</style>

<script type="text/javascript">
function displayhid()
{
//利用display隐藏后，div的位置不存在了
var div1 = document.getElementById("div1");
div1.style.display="none";
}

function displayshow()
{
var div1 = document.getElementById("div1");
div1.style.display="block";
}

function vishid()
{
//利用visibility隐藏后，div的还是占位的
var div1 = document.getElementById("div1");
div1.style.visibility="hidden";
}

function visshow()
{
var div1 = document.getElementById("div1");
div1.style.visibility="visible";
}

</script>
</head>
<body>
<div class="yangshi1" id="div1">

</div>

<div class="yangshi2" id="div2">

</div>

<input type="button"  value="用display隐藏div1" onclick="displayhid();"/>

<input type="button"  value="用display重新显示div1" onclick="displayshow();"/>

<input type="button"  value="用visibility隐藏div1" onclick="vishid();"/>

<input type="button"  value="用visibility重新显示div1" onclick="visshow();"/>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： div button function input class html

相关文章推荐

新的分享

章节导航