jquery操作div的顯示于隱藏

html頁面，顯示的內(nèi)容太多，會影響用戶體驗，如果有一些，點擊才出現(xiàn)的內(nèi)容，就可以減少內(nèi)容的干擾。使用jquery就可以很快的實現(xiàn)。

例子

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 <title>div隱藏測試</title>
 <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js">
 </script>
</head>
<body>
 <button id="controller">隱藏或者顯示</button>
 <div id="contents" style="display: none;">
 <p>div的內(nèi)容</p>
 </div>
 <script>
 $("#controller").click(function () {
 if ($("#contents").is(":hidden")) {
 $("#contents").show()
 } else {
 $("#contents").hide()
 }
 })
 </script>
</body>
</html>

jqyery操作

$("#contents").is(":hidden") 可以判斷是否是隱藏

$("#contents").show() 表示display:block,

$("#contents").hide() 表示display:none;

操作元素的屬性

$("#contents").attr("style","display:none;"); //隱藏div

$("#contents").attr("style","display:block;"); //顯示div

也可以操作css屬性

$("#contents").css("display","none"); //隱藏div

$("#contents").css("display","block"); //顯示div

也可以直接使用toggle轉(zhuǎn)換開關(guān)實現(xiàn)

$("#contents").toggle()

CSS中很多隱藏元素的方法，但這些方法的可訪問性、布局、動畫、性能和事件處理的方式有所不同。

動畫： 一些CSS隱藏元素的方法一般是全有或者全無，元素要么是完全可見，要么是完全不可見，并且沒有中間狀態(tài)。其他的，比如透明度，可以是一個范圍的值，所以在這中間過程插入動畫成為可能；
可訪問性： 下面的每一種方法都會在視覺上隱藏一個元素，但不一樣會真正的去除DOM元素。有一些方式隱藏元素后，屏幕閱讀器仍然能讀取到元素內(nèi)容；
事件處理： 隱藏元素之后，有些方式元素上的事件仍然能被觸發(fā)，而有些方式就會導(dǎo)致元素上的事件觸發(fā)無效；
表現(xiàn)： 瀏覽器加載并解析 HTML DOM 和 CSS 對象模型后，頁面將分三個階段呈現(xiàn)：布局（生成每個元素的幾何位置）、繪制（繪制每個元素的像素）、組合（以適當(dāng)?shù)捻樞蚍胖迷貙樱H導(dǎo)致構(gòu)圖變化的效果明顯比影響布局的效果更好。在某些情況下，瀏覽器還可以使用硬件加速。

下面就來看看CSS中隱藏元素的方式，以及每種方式的優(yōu)缺點。

1. opacity 和 filter: opacity()

opacity: N 和 filter: opacity(N) 屬性可以傳遞一個 0 到 1 之間的數(shù)字，或者 0% 和 100% 之間的百分比，對應(yīng)地表示完全透明和完全不透明。

opacity: N：該屬性用來設(shè)置元素的透明度；
filter: opacity(N) ：filter屬性用來設(shè)置元素的濾鏡，opacity是濾鏡重的透明度，用來設(shè)置元素的透明度。

div {
    opacity: 0;
}

div {
    filter: opacity(0%);
}
復(fù)制代碼

在現(xiàn)代瀏覽器中，這兩者之間幾乎沒有實際的區(qū)別，但如果同時應(yīng)用多種效果（模糊、對比度、灰度等）時，應(yīng)該使用 filter 屬性。

注意：opacity 可以設(shè)置動畫并提供出色的性能，但頁面上保留完全透明的元素可能會觸發(fā)事件。

2. color alpha 透明度

可以將元素的color、background-color 和 border-color 等屬性設(shè)置為rgba(0,0,0,0)，這樣就會使元素完全透明：

div {
	color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}
復(fù)制代碼

這三個屬性都是支持設(shè)置動畫效果的，需要注意，透明度不能應(yīng)用于帶有背景圖片的元素，除非它們是使用 linear-gradient 或類似方法生成的。

Alpha 通道可以設(shè)置為：

transparent：完全透明（中間不能插入動畫）；
rgba(r, g, b, a)：紅色、綠色、藍色和 alpha；
hsla(h, s, l, a)：色相、飽和度、亮度和 alpha；
#RRGGBBAA 或 #RGBA。

3. transform

transform 屬性可以用于元素的平移、縮放、旋轉(zhuǎn)或傾斜等?？梢允褂?scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏：

div {
	transform: scale(0);
}

div {
	translate(-9999px, 0px)
}
復(fù)制代碼

transform 屬性提供了出色的性能和硬件加速，因為元素被有效地移動到了單獨的層中，并且可以在 2D 或 3D 中進行動畫處理。原始的布局空間會保持原樣，并不會受影響。使用這種方式隱藏的元素不會觸發(fā)任何事件。

4. clip-path

clip-path 屬性可以創(chuàng)建一個剪輯區(qū)域，用于確定元素的哪些部分是可見的。使用 clip-path: circle(0) 可以將元素進行隱藏。

div {
	clip-path: circle(0);
}
復(fù)制代碼

clip-path為添加動畫效果提供了空間，不過它只能在現(xiàn)代瀏覽器中使用。

5. visibility: hidden

visibility 屬性可以設(shè)置為 visible 或 hidden 來顯示和隱藏元素。

div {
	visibility: hidden;
}
復(fù)制代碼

除非使用collapse值，否則元素使用的空間保持不變。

6. display: none

display 可能是最常用的元素隱藏方法; 。當(dāng)其值為 none 時元素就隱藏了。被隱藏的元素不會在頁面中占據(jù)位置，也不會響應(yīng)綁定的監(jiān)聽事件。

div {
  display: none;
}
復(fù)制代碼

然而，在大多數(shù)情況下，display 可能是最糟糕的 CSS 屬性。除非使用 position:absolute 將元素移出文檔流，或者采用contain屬性，否則它的隱藏過程無法設(shè)置動畫，并將觸發(fā)頁面重新布局。

7. z-index

可以通過將元素的 z-index 屬性設(shè)置為負值，以實現(xiàn)元素的隱藏。這實際上就是將元素放在了我們看不到的層。

div {
  z-index: -1;
}
復(fù)制代碼

8. position

position屬性允許使用top、bottom、left、right 從頁面中的默認位置移動元素。因此，絕對定位的元素可以通過左鍵：-9999px 等值移出屏幕：

div {
  position: absolute;
  left: -999px;
}
復(fù)制代碼

9. 覆蓋另一個元素

通過在元素的上面放置與背景顏色相同的元素，可以在視覺上隱藏一個元素。下面來使用::after偽元素來實現(xiàn)：

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}
復(fù)制代碼

雖然這從技術(shù)上講是可以實現(xiàn)的，但是這樣做需要更多的代碼。

10. 縮小尺寸

可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸以實現(xiàn)元素的隱藏。可能還需要應(yīng)用 overflow: hidden; 來確保內(nèi)容不會溢出。

div {
  height: 0;
  padding: 0;
  overflow: hidden;
}
復(fù)制代碼

使用這種形式我們可以在隱藏過程中使用動畫效果，并且他的性能會比 transform 好很多。

分類：

言

一說起隱藏HTML頁面上的元素，很多人第一反應(yīng)就是設(shè)置元素的css屬性display:none;值，這是一種最常見的隱藏頁面元素方法。本篇文章我們就一起看看使用CSS隱藏頁面元素的方法，以及它們的區(qū)別。

本篇文章中的例子直接放到github地址中，感興趣的同學(xué)可以自取。

https://github.com/zhouxiongking/article-pages/blob/master/articles/hideElement/hideElement.html

CSS

方法1-display:none

正如上文說的一樣，最簡單也最粗暴的方法就是設(shè)置元素的display屬性為none;

display:none;

設(shè)置為display:none;的元素將不會再占用頁面空間，其占用的空間會被其他元素所占有，從而會引起瀏覽器的重排和重匯。

方法2-visibility: hidden

另外一種方法是設(shè)置元素的visibility屬性為hidden。

visibility: hidden

這種做法雖然能夠隱藏元素，但是該元素仍會占用頁面空間，因此只會導(dǎo)致瀏覽器的重匯而不會引起重排。

如果希望元素隱藏后不會引起頁面布局的變化，則推薦使用visibility:hidden;方式。

方法3-opacity:0

設(shè)置元素透明度opacity屬性為0，也可以隱藏頁面元素。

opacity:0

在呈現(xiàn)上與visibility:hidden;方式一樣，同樣會占據(jù)頁面空間。

差異性-頁面布局

對頁面布局的影響主要是看是否會引起瀏覽器的重匯和重排，對應(yīng)的差異如下圖所示。

頁面布局差異

差異性-事件綁定

display:none;的元素會直接從頁面上消失，因此在該元素上綁定的事件不會生效。
visibility: hidden;的元素不會觸發(fā)綁定的事件。
opacity:0; 的元素會觸發(fā)綁定的事件，例如點擊會觸發(fā)click函數(shù)。

我們可以通過以下的例子來看看。

首先我們定義兩個div，分別設(shè)置為visibility: hidden;和opacity:0，在兩個div上分別綁定一個click事件。

定義div元素

綁定的事件

當(dāng)我們在兩個元素都進行點擊時，可以在控制臺看到如下輸出結(jié)果。

結(jié)果

從上述結(jié)果可以看出和上述結(jié)論一致。

差異性-動畫屬性

display:none;的元素會直接從頁面消失，因此定義transition效果完全無效。
visibility:hidden;的元素會在transition設(shè)置的時間內(nèi)消失，但是沒有動畫效果。
opacity:0;的元素可以和正常元素一樣，從頁面以動畫效果消失。

同樣我們可以通過以下這個例子來看看。

首先，我們定義兩個div，并設(shè)置其transition屬性。

div元素

定義transition效果

我們通過將鼠標(biāo)移至元素上，可以看到兩者的差異，從而驗證了上述結(jié)論的正確性。

結(jié)束語

本篇文章主要講解了使用CSS隱藏元素的幾種常用方法，并講解了它們之間的區(qū)別，以便大家在特定的場景中進行選擇。

在線咨詢

上一篇：將富文本html內(nèi)容轉(zhuǎn)換為純文本，并限制展示字?jǐn)?shù)長度
下一篇：備存：各種分割線的Html代碼

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商