js visibility和display区别（附代码实例）
史洛城
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
//元素的隐藏与显示
//visibility属性是隐藏元素但保持元素的浮动位置，而display实际上是设置元素的浮动特征。
//PS：当元素被隐藏之后，就不能再接收到其它事件了
//使用visibility属性设置的隐藏，元素的位置还在。
//当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。
function visibilityHidden() {
document.getElementById("d1").style.visibility = "hidden";
}
function visibilityVisible() {
document.getElementById("d1").style.visibility = "visible";
}
//使用display属性设置隐藏，位置会挪动。
//【1】none设置后，元素被隐藏，原来所在位置也不再占用。
//【2】当display被设置为block(块)时，容器中所有的元素将会被当作一个单独的块，就像<div>元素一样，它会在那个点被放入到页面中。
//(实际上你可以设置<span>的display:block，使其可以像<div>一样工作。
//【3】将display设置为inline，将使其行为和元素inline一样，即使它是普通的块元素如<div>，它也将会被组合成像<span>那样的输出流。
function displayNone() {
document.getElementById("d2").style.display = "none";
}
function displayBlock() {
document.getElementById("d2").style.display = "block";
}
function displayInline() {
document.getElementById("d2").style.display = "inline";
}
</script>
</head>
<body>
<h1>visibility</h1>
<div id="d1" οnclick="alert('Div 1 onclick');">
Div 1
</div>
<br />
<button type="button" οnclick="visibilityHidden()">hidden</button>
<button type="button" οnclick="visibilityVisible()">visible</button>
<br />
<br />
<hr />
<h1>display</h1>
<div id="d2" οnclick="alert('Div 2 onclick');">
Div 2
</div>
<br />
<button type="button" οnclick="displayNone()">none</button>
<button type="button" οnclick="displayBlock()">block</button>
<button type="button" οnclick="displayInline()">inline</button>
</body>
</html>
类似资料：