在Web開發中，隱藏頁面元素使其視覺不可見是一個非常常見的需求。為了實現這一目標，我們通常會采用多種方法，最常用的例如CSS的display屬性，只要設置為node即可隱藏元素。

本文將通過對當前所有可用的隱藏元素的方法做一個總結，大概有10種方法可以使用，一一做下介紹。

所有方法的總結在文章的最后，可以跳過前文。

display:none

display 屬性用于設置頁面元素的顯示方式，能夠控制元素的顯示或者隱藏，當它的值被設置為 none 時，就會隱藏對應的元素，使其不可見。
這種方法是最常用的隱藏元素的方法，可以讓元素在網頁中完全消失，不會占據頁面上的任何空間，用戶無法看到或進行交互。
但是，這樣也會導致元素脫離文檔流，可能會影響其他元素的布局。

<p class="3181-f5a9-dce9-ee72 elem">
  這是一個要隱藏的元素。
</p>

.elem {
  display: none;
}

visibility:hidden

visibility 屬性是專門用于控制元素的顯示和隱藏，當它的值設置為 hidden 后，也會將元素隱藏。
但與 display 不同的地方在于，此時元素仍會占據頁面上的空間，只是在視覺上不可見，顯示為空白區域(所占區域為元素的大小)。
這種方式也是無法進行元素的響應事件監聽和交互狀態，通常應用于需要隱藏但仍需要占據空間的元素，如占位符、提示信息等。

.elem {
  visibility: hidden;
}

opacity: 0

opacity 屬性用于控制元素的透明度，取值范圍：0 - 1，0 表示完全透明，1 表示不透明。
當我們將元素的 opacity 屬性設置為 0 時，該元素將會變為不可見狀態，不過它仍會占據頁面上的空間。

.elem {
  opacity: 0;
}

這種方式隱藏的元素，都是視覺上不可見，和 visibility:hidden 比較類似。
但不同的地方在于：opacity: 0 設置元素不可見以后，用戶仍然能夠與該元素進行交互，而 visibility:hidden 則不行。

.elem {
  opacity: 0;
}
.elem:hover {
  opacity: 0.5;
}

<p class="7a78-f238-3181-f5a9 elem" onclick="alert(1)">
  這是一個要隱藏的元素。
</p>

如上代碼所示，p.elem 元素設置 opacity: 0 不可見以后，onclick 鼠標點擊事件會響應，hover 狀態也會執行。

position

position 屬性用于控制元素的定位方式，可以將元素在頁面的不同位置進行定位，有多個取值，也是css中非常重要的屬性，但我們這里只討論如何隱藏元素。
當 position 取值相對定位或者絕對定位時，給定(left/top/right/bottom)四個方向上的任意一個較大的值(或負值)，都能將元素設置到屏幕之外，達到不可見的狀態。

在使用上，相對定位和絕對定位有一定的區別。
絕對定位的元素會脫離當前文檔流，整個從視覺上完全消失，效果上與 display:none 相似。

.elem {
  position: absolute;
  left: -9999px;
}

而相對定位則只是將元素移出，在當前位置仍然會占據一定的空間，效果上與 visibility:hidden 較相似。

.elem {
  position: relative;
  top: -9999px;
}

但使用的定位的方式使元素不可見，都無法再與元素進行交互操作。

在絕對定位時，還可以通過 z-index 屬性將元素的層級調低，讓它被其他元素遮擋，達到一定的隱藏效果。

clip-path

clip-path 屬性，允許用不同的剪切方式創建元素的可顯示區域，區域內的內容可以展示，區域外的內容則隱藏。之前也有博文詳細介紹該屬性，clip-path詳解。
根據它的特點，如果將元素的所有內容都設置到顯示區域外，則元素就自動隱藏了，達到不可見的狀態，而要實現這點只需要剪切區域設置為0，有多個形狀值可以實現：

.elem {
  clip-path: circle(0%);
  clip-path: inset(50%);
  clip-path: polygon(0 0);
}

這種方式隱藏的元素，雖然不可見，但仍然會占據自身大小的空間，效果上與 visibility:hidden 相似。并且也不能響應事件監聽和各種交互狀態。

filter:blur

filter 屬性是CSS3開始提供的，用于對頁面元素設置各種濾鏡效果，有大概十多個各種不同的濾鏡值可以設置，我們這里使用 blur 模糊效果來達到隱藏頁面元素的效果。

只需要將 blur() 值設置為一個較大的值，元素將模糊到無法顯示的地方，如值大于400：

.elem {
  filter: blur(500px);
}

通過以上代碼，就能將元素進行隱藏了，他的效果與使用 opacity: 0 一樣，元素雖不可見，但仍占據空間，并且能夠響應事件和交互狀態。

注意：filter:opacity(0) 透明濾鏡與 opacity: 0 也一樣。

HTML Element 的 hidden 屬性

通過設置頁面元素(Element)的 hidden 屬性，也能夠將元素進行隱藏，它達到的效果與 display:none 幾乎一樣，元素脫離文檔流、不可見，不占用空間，無法響應事件和用戶交互等。

<p hidden>這個元素將被隱藏，不占用空間，無法交互。</p>

以上方式，針對的頁面元素，是不區分塊狀元素和行內元素，都能夠達到隱藏效果，下面還有幾種方式，可能針對特定的元素才起作用。

width: 0

這個方式代表一類隱藏元素的方法，即通過設置元素的寬高屬性為 0，達到隱藏元素的效果。
注意，行內元素無法設置寬高屬性，所以這種方法一般處理塊狀元素。

.elem {
  width: 0;
  height: 0;
}

以上代碼，就能將塊狀元素進行隱藏，不占據空間，并且這種方式隱藏的塊狀元素也無法響應事件和交互狀態。

但如果塊狀元素內包含文字，則文字內容仍然會顯示，并且呈豎狀：

因此，這類方法平時很少會使用。
那如果想把文本內容也隱藏，有沒有辦法呢？那就要用到下面的屬性了。

font-size: 0

font-size 用于設置文字的大小，當我們把它的值設置為 0 時，文本內容就不可見。

.elem {
  font-size: 0;
}

如果是行內元素，或者塊狀元素內只包含文字，則單獨使用 font-size: 0 都可以隱藏。
但我們可以結合寬高和文字大小屬性一起使用，就能達到完整的隱藏效果，而不分塊狀元素還是行內元素，都能起作用：

.elem {
  width: 0;
  font-size: 0;
}

這種方式，行內元素將占據空間，而塊狀元素則不占，都無法進行交互。

transform:scale(0)

transform 屬性用于對元素進行變換，例如旋轉、縮放、平移等。其中，縮放 scale 就可以用來隱藏元素使用，只需要將 scale 的值設置為 0，該元素就會被縮放到不可見的狀態，達到隱藏效果：

.elem {
  transform: scale(0);
}

需要注意的是，transform:scale(0) 達成的隱藏效果，無法作用于行內元素，這是由于 transform 屬性本身對行內元素不起作用。
并且，這種隱藏方式也會占用頁面空間(元素的原始大小區域)，但元素實際上寬高都為0，同樣無法響應事件和交互。

其他

以上多數都是通過設置 css 屬性達成的頁面元素隱藏效果，但在前端開發中，很多時候，我們需要使用 JavaScript 來控制頁面元素，包括隱藏也是一樣的。
如，我們使用 JavaScript 代碼來控制元素的 sdiplay 屬性，以便可以隱藏或顯示元素：

const element = document.getElementById('elementId')
element.style.display = element.style.display === 'none' ? 'block' : 'none'

以上代碼，就是獲取到元素對象，通過設置 style 樣式對象的 display 屬性，控制了它的隱藏和顯示。

除此以外，我們還可以使用 JavaScript 對象將頁面元素刪除，如果要顯示還可以再添加回來，通過這種方式也能達成影響和顯示的效果：

const element = document.getElementById('elementId')
document.body.removeChild(element)
setTimeout(() => {
  document.body.appendChild(element)
}, 3000)

總結

以上就是關于Web頁面隱藏元素的10種方法(除去了JavaScript的方法)，每種方法都有自身的特點，我們在實際開發過程中，需要根具體的需求和場景來選擇最合適的方法。
下面，是針對這些方法的一個總結：

到此這篇關于CSS將頁面元素隱藏的10種方法小結的文章就介紹到這了,更多相關CSS元素隱藏內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

總結

以上是生活随笔為你收集整理的CSS将页面元素隐藏的10种方法小结(css隐藏元素的方法中可以触发点击事件)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。