在Web開發(fā)中，隱藏頁面元素使其視覺不可見是一個(gè)非常常見的需求。為了實(shí)現(xiàn)這一目標(biāo)，我們通常會(huì)采用多種方法，最常用的例如CSS的display屬性，只要設(shè)置為node即可隱藏元素。

本文將通過對(duì)當(dāng)前所有可用的隱藏元素的方法做一個(gè)總結(jié)，大概有10種方法可以使用，一一做下介紹。

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

display:none

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

<div class="elem">
  這是一個(gè)要隱藏的元素。
</div>

.elem {
  display: none;
}

visibility:hidden

visibility 屬性是專門用于控制元素的顯示和隱藏，當(dāng)它的值設(shè)置為 hidden 后，也會(huì)將元素隱藏。
但與 display 不同的地方在于，此時(shí)元素仍會(huì)占據(jù)頁面上的空間，只是在視覺上不可見，顯示為空白區(qū)域(所占區(qū)域?yàn)樵氐拇笮?。
這種方式也是無法進(jìn)行元素的響應(yīng)事件監(jiān)聽和交互狀態(tài)，通常應(yīng)用于需要隱藏但仍需要占據(jù)空間的元素，如占位符、提示信息等。

.elem {
  visibility: hidden;
}

opacity: 0

opacity 屬性用于控制元素的透明度，取值范圍：0 - 1，0 表示完全透明，1 表示不透明。
當(dāng)我們將元素的 opacity 屬性設(shè)置為 0 時(shí)，該元素將會(huì)變?yōu)椴豢梢姞顟B(tài)，不過它仍會(huì)占據(jù)頁面上的空間。

.elem {
  opacity: 0;
}

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

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

<div class="elem" onclick="alert(1)">
  這是一個(gè)要隱藏的元素。
</div>

如上代碼所示，div.elem 元素設(shè)置 opacity: 0 不可見以后，onclick 鼠標(biāo)點(diǎn)擊事件會(huì)響應(yīng)，hover 狀態(tài)也會(huì)執(zhí)行。

position

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

在使用上，相對(duì)定位和絕對(duì)定位有一定的區(qū)別。
絕對(duì)定位的元素會(huì)脫離當(dāng)前文檔流，整個(gè)從視覺上完全消失，效果上與 display:none 相似。

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

而相對(duì)定位則只是將元素移出，在當(dāng)前位置仍然會(huì)占據(jù)一定的空間，效果上與 visibility:hidden 較相似。

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

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

在絕對(duì)定位時(shí)，還可以通過 z-index 屬性將元素的層級(jí)調(diào)低，讓它被其他元素遮擋，達(dá)到一定的隱藏效果。

clip-path

clip-path 屬性，允許用不同的剪切方式創(chuàng)建元素的可顯示區(qū)域，區(qū)域內(nèi)的內(nèi)容可以展示，區(qū)域外的內(nèi)容則隱藏。之前也有博文詳細(xì)介紹該屬性，clip-path詳解。
根據(jù)它的特點(diǎn)，如果將元素的所有內(nèi)容都設(shè)置到顯示區(qū)域外，則元素就自動(dòng)隱藏了，達(dá)到不可見的狀態(tài)，而要實(shí)現(xiàn)這點(diǎn)只需要剪切區(qū)域設(shè)置為0，有多個(gè)形狀值可以實(shí)現(xiàn)：

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

這種方式隱藏的元素，雖然不可見，但仍然會(huì)占據(jù)自身大小的空間，效果上與 visibility:hidden 相似。并且也不能響應(yīng)事件監(jiān)聽和各種交互狀態(tài)。

filter:blur

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

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

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

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

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

HTML Element 的 hidden 屬性

通過設(shè)置頁面元素(Element)的 hidden 屬性，也能夠?qū)⒃剡M(jìn)行隱藏，它達(dá)到的效果與 display:none 幾乎一樣，元素脫離文檔流、不可見，不占用空間，無法響應(yīng)事件和用戶交互等。

<div hidden>這個(gè)元素將被隱藏，不占用空間，無法交互。</div>

以上方式，針對(duì)的頁面元素，是不區(qū)分塊狀元素和行內(nèi)元素，都能夠達(dá)到隱藏效果，下面還有幾種方式，可能針對(duì)特定的元素才起作用。

width: 0

這個(gè)方式代表一類隱藏元素的方法，即通過設(shè)置元素的寬高屬性為 0，達(dá)到隱藏元素的效果。
注意，行內(nèi)元素?zé)o法設(shè)置寬高屬性，所以這種方法一般處理塊狀元素。

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

以上代碼，就能將塊狀元素進(jìn)行隱藏，不占據(jù)空間，并且這種方式隱藏的塊狀元素也無法響應(yīng)事件和交互狀態(tài)。

但如果塊狀元素內(nèi)包含文字，則文字內(nèi)容仍然會(huì)顯示，并且呈豎狀：

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

font-size: 0

font-size 用于設(shè)置文字的大小，當(dāng)我們把它的值設(shè)置為 0 時(shí)，文本內(nèi)容就不可見。

.elem {
  font-size: 0;
}

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

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

這種方式，行內(nèi)元素將占據(jù)空間，而塊狀元素則不占，都無法進(jìn)行交互。

transform:scale(0)

transform 屬性用于對(duì)元素進(jìn)行變換，例如旋轉(zhuǎn)、縮放、平移等。其中，縮放 scale 就可以用來隱藏元素使用，只需要將 scale 的值設(shè)置為 0，該元素就會(huì)被縮放到不可見的狀態(tài)，達(dá)到隱藏效果：

.elem {
  transform: scale(0);
}

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

其他

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

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

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

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

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

總結(jié)

以上就是關(guān)于Web頁面隱藏元素的10種方法(除去了JavaScript的方法)，每種方法都有自身的特點(diǎn)，我們?cè)趯?shí)際開發(fā)過程中，需要根具體的需求和場(chǎng)景來選擇最合適的方法。
下面，是針對(duì)這些方法的一個(gè)總結(jié)：

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

最新評(píng)論