<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>
