隱藏css元素的5種方法

這篇文章運(yùn)用簡單易懂的例子給大家介紹隱藏css元素的5種方法，代碼非常詳細(xì)，感興趣的小伙伴們可以參考借鑒，希望對(duì)大家能有所幫助。

首先我們簡單介紹一下隱藏css元素的5種方法，分別為：

1、使用opacity屬性來隱藏元素

2、使用visibility屬性來隱藏元素

3、使用display屬性來隱藏元素

4、使用position屬性來隱藏元素

5、使用clip-path屬性來隱藏元素

下面我們來詳細(xì)介紹一下這5種隱藏css元素的方法，讓大家了解它們之間的細(xì)微差別。

opacity屬性

opacity屬性是通過設(shè)置元素的透明度來隱藏元素的。它的設(shè)計(jì)不會(huì)以任何方式改變?cè)氐倪吔缈颉＿@就意味著將不透明度設(shè)置為零只會(huì)在視覺上隱藏元素；元素仍然占據(jù)其位置并影響網(wǎng)頁的布局，它還會(huì)響應(yīng)用戶交互。

.hide {
  opacity: 0;
}

如果你打算使用opacity屬性來隱藏屏幕閱讀器中的元素，很遺憾，這是不可能的。因?yàn)槠聊婚喿x器將讀取元素及其所有內(nèi)容，就像網(wǎng)頁上的所有其他元素一樣。

我還應(yīng)該提一下，opacity屬性被動(dòng)畫化，并用于創(chuàng)建一些出色的效果。例：

HTML代碼：

<div>1</div>
<div class="o-hide">2</div>
<div>3</div>

css代碼：

.o-hide {
  opacity: 0;
  transition: all ease 0.8s;
}

.o-hide:hover {
  opacity: 1;
}

效果圖：

當(dāng)將鼠標(biāo)懸停在隱藏的第二個(gè)塊上時(shí)，該元素將從完全透明的狀態(tài)平滑過渡到完全不透明。該模塊還設(shè)置了cursor：pointer，以顯示它可以與之交互。

visibility屬性

visibility屬性是通過設(shè)置是否可見，來隱藏元素的。當(dāng)設(shè)置visibility屬性的值為hidden將隱藏我們的元素。

visibility屬性就和opacity屬性一樣，隱藏元素仍會(huì)影響我們網(wǎng)頁的布局。唯一的區(qū)別是，這次當(dāng)用戶隱藏時(shí)，它不會(huì)捕獲任何用戶交互。此外，該元素也將對(duì)屏幕閱讀器隱藏。

只要初始狀態(tài)和最終狀態(tài)具有不同的值，此屬性也能夠進(jìn)行動(dòng)畫處理。這確保了可見性狀態(tài)之間的過渡可以是平滑的而不是突然的。

這個(gè)演示展示了visibility區(qū)別于opacity的地方：

HTML代碼：

<div>1</div>
<div class="o-hide"><p>2</p></div>
<div>3</div>

css代碼：

.o-hide {
  visibility: hidden;
  transition: all ease 0.8s;
}
.o-hide:hover {
  visibility: visible;
}
.o-hide p {
  visibility: visible;
  margin: 0;
  padding: 0;
}

js代碼：

var oHide = document.querySelector(".o-hide");
var oHideP = document.querySelector(".o-hide p");
var count = oHideP.innerHTML;

oHide.addEventListener("click", function(){
    count++;
    oHideP.innerHTML = count;
});

效果圖：

請(qǐng)注意，如果將屬性顯式設(shè)置為visibility，則設(shè)置visibility為hidden的元素的后代仍然可見。嘗試將鼠標(biāo)懸停在隱藏元素上而不是內(nèi)部段落上，將看到光標(biāo)不會(huì)變?yōu)橹羔?。此外，如果你嘗試單擊該元素，則您的點(diǎn)擊也不會(huì)被響應(yīng)。

<div>標(biāo)簽內(nèi)的<p>標(biāo)簽仍然會(huì)捕獲所有的鼠標(biāo)事件。當(dāng)你在文本上徘徊時(shí)，<div>本身就變得可見并開始響應(yīng)事件。

display屬性

display屬性是真正意義上的隱藏了元素，設(shè)置display屬性的值為none，可以確保根本不生成框模型；且使用此屬性，隱藏元素時(shí)不會(huì)留下空白空間。不僅如此，只要display設(shè)置為none，任何直接用戶交互都是不可能的。此外，屏幕閱讀器也不會(huì)讀取元素的內(nèi)容。就好像元素不存在一樣。

而，我們?cè)氐乃泻蟠矊⒈浑[藏。此屬性無法設(shè)置動(dòng)畫，因此各種狀態(tài)之間的轉(zhuǎn)換始終是突然的。

請(qǐng)注意，該元素仍可通過DOM訪問。你可以像使用任何其他元素一樣操縱它。例：

HTML代碼：

<div>Hover!</div>
<div class="o-hide"><p>0</p></div>
<div>0</div>

css代碼：

.o-hide {
  display: none;
  transition: all ease 0.8s;
}

.o-hide:hover {
  display: block;
}

.o-hide p {
  display: block;
  margin: 0;
  padding: 0;
}

js代碼：

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = '<p>' + count + '</p>';
});

firstDiv.addEventListener("click", function(){
  oHide.style.display = "block";
});

效果圖：

可以看到第二塊有一個(gè)p段落，其display屬性設(shè)置為block，但該段仍然是看不見的。這就是visibility:hidden和display: none的一個(gè)區(qū)別。在第一種情況下，任何明確設(shè)置visibility為visible的后代都將變?yōu)榭梢?，但這不會(huì)發(fā)生display屬性里。設(shè)置display: none后，所有的后代都被隱藏起來，不管他們的展示有多大價(jià)值。

現(xiàn)在，在演示的第一個(gè)塊上懸停幾次。做過徘徊？單擊第一個(gè)塊。這應(yīng)該使第二個(gè)塊可見。里面的計(jì)數(shù)現(xiàn)在應(yīng)該是零以外的數(shù)字。這是因?yàn)榧词箤?duì)用戶隱藏的元素仍然可以使用JavaScript進(jìn)行操作

position屬性

假設(shè)你有一個(gè)要與之交互的元素，但又不希望它影響網(wǎng)頁布局。到目前為止，沒有任何屬性可以正確處理這種情況。在這種情況下，你可以做的一件事，那就是將元素移出視圖窗口。這樣它不會(huì)影響布局，仍然可以操作。

以下演示說明絕對(duì)定位如何隱藏元素和工作方式與上一個(gè)演示大致相同（html代碼一樣）：

css代碼：

.o-hide {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

.o-hide:hover {
  position: static;
}

js代碼：

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = count;
});

firstDiv.addEventListener("click", function(){
    oHide.style.position = "static";
});

效果圖：

這里的主要思想是將負(fù)的頂部和左側(cè)值設(shè)置得足夠高，以使元素在屏幕上不再可見。該技術(shù)的一個(gè)好處（或潛在的缺點(diǎn)）是屏幕閱讀器可以讀取絕對(duì)定位元素的內(nèi)容。這是完全可以理解的，因?yàn)槟阒粚⒃匾瞥鲆晥D窗口，以便用戶無法看到它。

你應(yīng)該避免使用此方法隱藏任何可以獲得焦點(diǎn)的元素，因?yàn)楫?dāng)用戶關(guān)注該元素時(shí)會(huì)導(dǎo)致意外跳轉(zhuǎn)。此方法經(jīng)常用于創(chuàng)建自定義復(fù)選框或單選按鈕。

clip-path屬性

隱藏元素的另一種方法是剪切它們。以前，這可以通過clip屬性來完成，但是已經(jīng)棄用了有利于更好的屬性clip-path。

請(qǐng)注意，IE或Edge尚未完全支持下面clip-path屬性值的使用。這是一個(gè)展示它的示例演示：

css代碼：

.o-hide {
  clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
}

js代碼：

var count = 0;
var oHide = document.querySelector(".o-hide");
var firstDiv = document.querySelector("div:nth-child(1)");

firstDiv.addEventListener("mouseover", function(){
    count++;
    oHide.innerHTML = count;
});


firstDiv.addEventListener("click", function(){
    oHide.className = "";
});

效果圖：

如果將鼠標(biāo)懸停在第一個(gè)元素上，它仍然可以影響第二個(gè)元素，即使它被clip-path屬性隱藏。如果單擊該元素，它將刪除隱藏的類以顯示我們一直存在的元素。這個(gè)文本仍然可以被屏幕閱讀器閱讀。

即使我們的元素不再可見，它周圍的元素仍然表現(xiàn)得像它原來的矩形尺寸。請(qǐng)記住，在懸停區(qū)域之外，像懸?；螯c(diǎn)擊等用戶交互是不可能的。在我們的例子中，這意味著用戶將無法直接與隱藏元素交互。此外，該屬性能夠以各種方式被動(dòng)畫化以產(chǎn)生新的效果。

關(guān)于隱藏css元素的5種方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到。