visibility

visibility

設定元素的矩形格子可見，或隱藏。可設為：

1. visible：顯現矩格，此為預設值。
2. hidden：隱藏矩格，但依然佔有版面空間。要完全消去任一元素所佔的空間，要用 display:none。
3. collapse：隱藏矩格，但依然佔有版面空間。只有用在報表（TABLE）時，會縮減空間。IE6 不能用 collapse。
4. inherit：繼承父元素的特徵值。

<div style='border:solid 1px red; width:300px'> 圖一<br /> <img style='visibility:hidden' src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> </div> <div style='border:solid 1px red; width:300px'> 圖二<br /> <img style='visibility:collapse' src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> </div> <div style='border:solid 1px red; width:300px'> 圖三<br /> <table style='visibility:collapse'> <tr><td><img src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> </table> </div> <div style='visibility:hidden; border:solid 1px red; width:300px'> 圖四<br /> <img style='visibility:visible' src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> </div>

• 上面的圖一與圖二設為 hidden, collapse，所以看不見，但佔有空間。圖三則外加 TABLE 元素，且此 TABLE 元素設了 visibility:collapse，因此看不見也不佔空間。Firefox 符合前述規則。在 IE6 圖二與圖三都會顯現。在 Safari, Chrome 中，圖三看不見但是佔有空間。第四圖外層的 DIV 元素設了 visibility:hidden，而 IMG 元素則設了 visible，結果 DIV 的內容消失，但是圖形有展現出來。

javascript 應用。可以用 style 物件 的特徵 visibility 作動態變化。 <img id='test'src="http://2.bp.blogspot.com/_66l2ZxYOqcM/SQpEq0sqwOI/AAAAAAAAAC4/wwqnnrUxjjk/s200/shape.jpg" /> <script type='text/javascript'> function toggleCSS(id, pty, v1, v2, ms) { var os=document.getElementById(id).style; os[pty]= (os[pty] == v1 ) ? v2 : v1; setTimeout('toggleCSS("'+id+'","'+pty+'","'+v1+'","'+v2+'","'+ms+'")', ms); } toggleCSS("test", "visibility", "hidden", "visible", 1000); </script>