隱藏css元素的5種方法-創(chuàng)新互聯(lián)

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

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

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

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

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

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

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

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

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

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

.hide {
  opacity: 0;
}

如果你打算使用opacity屬性來隱藏屏幕閱讀器中的元素，很遺憾，這是不可能的。因為屏幕閱讀器將讀取元素及其所有內容，就像網(wǎ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;
}

效果圖：

隱藏css元素的5種方法

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

visibility屬性

visibility屬性是通過設置是否可見，來隱藏元素的。當設置visibility屬性的值為hidden將隱藏我們的元素。

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

只要初始狀態(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;
});

效果圖：

隱藏css元素的5種方法

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

<div>標簽內的<p>標簽仍然會捕獲所有的鼠標事件。當你在文本上徘徊時，<div>本身就變得可見并開始響應事件。

display屬性

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

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

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

效果圖：

隱藏css元素的5種方法

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

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

position屬性

假設你有一個要與之交互的元素，但又不希望它影響網(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";
});

效果圖：


隱藏css元素的5種方法

這里的主要思想是將負的頂部和左側值設置得足夠高，以使元素在屏幕上不再可見。該技術的一個好處（或潛在的缺點）是屏幕閱讀器可以讀取絕對定位元素的內容。這是完全可以理解的，因為你只將元素移出視圖窗口，以便用戶無法看到它。

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

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 = "";
});

效果圖：


隱藏css元素的5種方法

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

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

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

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

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

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

廣告

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

綿陽服務器托管