Zi 字媒體

隱藏 HTML 元件 ( Element ) 方式 – 設定屬性 – jashliao部落格

2021/12/25

隱藏 HTML 元件 ( Element ) 方式 – 設定屬性

資料來源:http://www.arthurtoday.com/2010/01/html-element.html

https://www.wibibi.com/info.php?tid=166

CSS 已經有支援隱藏的屬性了，所以，只要在 HTML 元件裡加入「style = “display:none”」或「style = “visibility:hidden”」的屬性，就可以把該元件給隱藏起來，然後，再用「style = “display:block”」就可以恢復成不隱藏，如果沒有特別設定這個屬性，那麼預設就是會顯示的，使用範例下如：

隱藏這個
 隱藏這個

不隱藏這個

隱藏這個

PS.這兩種用法有什麼樣的差異呢？

◇display:none 的意思是隱藏包含

標籤整個元素。
◆visibility:hidden 只會隱藏區塊中的內容，並保留
標籤的屬性，換句話說
標籤所佔的區塊還是存在，只是沒有顯示內容而已。

不隱藏這個

實驗心得:

使用『visibility:hidden』把圖片隱藏起來可以讓 bit.ly短網址在LINE解析網頁時產生相關縮圖，但畫面卻沒有對應圖片顯示，用在放置影片撥放網頁非常好用。

實測語法:

影片縮圖:

結果網址: 搞笑影片: 想考我數學？還好我會！你呢? (2020/04/10) ~ https://bit.ly/3aZRFFP