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

為順義等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及順義網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都做網(wǎng)站、順義網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

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

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

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

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

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

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

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

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

.hide {
  opacity: 0;
}

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

我還應(yīng)該提一下，opacity屬性被動畫化，并用于創(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)懸停在隱藏的第二個塊上時，該元素將從完全透明的狀態(tài)平滑過渡到完全不透明。該模塊還設(shè)置了cursor：pointer，以顯示它可以與之交互。

visibility屬性

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

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

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

這個演示展示了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;
});

效果圖：

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

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

display屬性

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

而，我們元素的所有后代也將被隱藏。此屬性無法設(shè)置動畫，因此各種狀態(tài)之間的轉(zhuǎn)換始終是突然的。

請注意，該元素仍可通過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";
});

效果圖：

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

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

position屬性

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

以下演示說明絕對定位如何隱藏元素和工作方式與上一個演示大致相同（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ù)的一個好處（或潛在的缺點）是屏幕閱讀器可以讀取絕對定位元素的內(nèi)容。這是完全可以理解的，因為你只將元素移出視圖窗口，以便用戶無法看到它。

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

clip-path屬性

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

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

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)懸停在第一個元素上，它仍然可以影響第二個元素，即使它被clip-path屬性隱藏。如果單擊該元素，它將刪除隱藏的類以顯示我們一直存在的元素。這個文本仍然可以被屏幕閱讀器閱讀。

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

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

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

名稱欄目：隱藏css元素的5種方法-創(chuàng)新互聯(lián)
本文路徑：http://jinyejixie.com/article22/coiecc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、標(biāo)簽優(yōu)化、網(wǎng)站改版、網(wǎng)站導(dǎo)航、網(wǎng)站設(shè)計、企業(yè)網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)