隱藏 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”」就可以恢復成不隱藏，如果沒有特別設定這個屬性，那麼預設就是會顯示的，使用範例下如：

<div style = "display:none">隱藏這個</div>
<div style = "visibility:hidden"> 隱藏這個</div>

<div style = "display:block">不隱藏這個</div> 

<div style = “display:none”>隱藏這個</div>

<div style = “visibility:hidden”>隱藏這個</div>

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

    ◇display:none 的意思是隱藏包含 <div> 標籤整個元素。

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

<div style = “display:block”>不隱藏這個</div> 

實驗心得:

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

實測語法:

<div style="visibility:hidden;">
	<p>
		<strong><span style="font-size:24px;font-family:DFKai-SB;">影片縮圖:</span></strong> 
	</p>
	<p>
		<img src="/wordpress/wp-content/uploads/2020/04/20200410054826_24592.jpg" alt="" /> 
	</p>
</div>

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