CSS visibility 屬性 · W3School CSS 參考手冊

# CSS visibility 屬性 ## 實例使 h2 元素不可見： ``` h2 { visibility:hidden; } ``` ## 瀏覽器支持 | IE | Firefox | Chrome | Safari | Opera | | --- | --- | --- | --- | --- | 所有主流瀏覽器都支持 visibility 屬性。注釋：任何的版本的 Internet Explorer （包括 IE8）都不支持 "inherit" 和 "collapse" 屬性值。 ## 定義和用法 visibility 屬性規定元素是否可見。提示：即使不可見的元素也會占據頁面上的空間。請使用 "display" 屬性來創建不占據頁面空間的不可見元素。 ### 說明這個屬性指定是否顯示一個元素生成的元素框。這意味著元素仍占據其本來的空間，不過可以完全不可見。值 collapse 在表中用于從表布局中刪除列或行。 | 默認值： | visible | | --- | --- | | 繼承性： | yes | | --- | --- | | 版本： | CSS2 | | --- | --- | | JavaScript 語法： | _object_.style.visibility="hidden" | | --- | --- | ## 可能的值 | 值 | 描述 | | --- | --- | | visible | 默認值。元素是可見的。 | | hidden | 元素是不可見的。 | | collapse | 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列占據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 "hidden"。 | | inherit | 規定應該從父元素繼承 visibility 屬性的值。 | ## TIY 實例 [如何使元素不可見](/tiy/t.asp?f=csse_visibility) 本例演示如何使元素不可見。你希望元素被顯示出來，還是不呢？ ``` <html> <head> <style type="text/css"> h1.visible {visibility:visible} h1.invisible {visibility:hidden} </style> </head> <body> <h1 class="visible">這是可見的標題</h1> <h1 class="invisible">這是不可見的標題</h1> </body> </html> ``` [把表格元素設置為 collapse](/tiy/t.asp?f=csse_visibility_collapse) 本例演示如何使表格元素疊加？ ``` <html> <head> <style type="text/css"> tr.coll { visibility:collapse } </style> </head> <body> <table border="1"> <tr> <td>Adams</td> <td>John</td> </tr> <tr class="coll"> <td>Bush</td> <td>George</td> </tr> </table> </body> </html> ``` ## 相關頁面 CSS 教程：[CSS 定位](/css/css_positioning.asp "CSS 定位 (Positioning)") HTML DOM 參考手冊：[visibility 屬性](/jsref/prop_style_visibility.asp "HTML DOM visibility 屬性")