Last Updated on 2021-06-08 by Clay
今天要紀錄的是在撰寫 HTML 當中,如何隱藏區塊。之所以想要製作這個功能,純粹是因為我想要撰寫一個『複製』文字的功能,但是這個『文字』的部份不打算顯示在頁面上。
要做到這樣的功能,其實也相當容易,只要在 "style" 當中設定 "display: none" 即可。以下就簡單地進行示範。
隱藏 HTML 當中的區塊
首先,我先撰寫一個簡單的 HTML 檔:
<p>1</p> <p>2</p> <p>3</p>
Output:

然後,若是我們想要隱藏 "2" 顯示的區塊,那麼我們可以將程式修改為:
<p>1</p> <p style="display: none">2</p> <p>3</p>
Output:

我們可以看到,雖然 "2" 的區塊仍然存在我們的程式碼,但是在顯示的頁面上卻是成功隱藏著的。