JavaScript >> Javascript 文檔 >  >> jQuery

JavaScript:檢查元素是否被 jQuery 隱藏

簡介

在本文中,我們將了解如何使用 JQuery 檢查元素是否隱藏 .以下是檢查元素可見性的最常用方法:

console.log($(myElement).is(":hidden")) 
console.log($(myElement).is(":visible")) 
console.log($(myElement).css("visibility") === "hidden") 
console.log($(myElement).css("display") === "none") 
console.log($(myElement).css("opacity") <= "0") 

多個因素可以在元素的可見性中發揮作用!我們將涵蓋每種情況並考慮何時使用它們是明智的。不過,首先,讓我們設置我們的測試環境。

環境設置

對於本教程,我們將使用 jQuery Core,版本 3.6.0。可以從jQuery官網獲取最新的CDN。

讓我們從創建一個 index.html 開始 大多數頁面都有樣板代碼的文件,並添加一個 <p> 具有名為 first-element 的類的元素 到 <body>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <title>Document</title>
</head>

<body>
    <p class="first-element" >This is the first paragraph.</p>
</body>

</html>

現在讓我們隱藏這一段,以便我們可以用 .is(":hidden") 測試它的可見性 !隱藏 first-element 我們可以簡單地添加 hidden 歸屬於它:

<p class="first-element" hidden>This is the first paragraph</p>

注意: 重新加載頁面並確認 first-element 不再可見。

.is(":hidden")檢查元素是否隱藏

使用 .is(":hidden") 您可以創建 <script></script> 標籤並在其中添加您的 JavaScript 代碼,或使用 控制台 瀏覽器工具直接執行代碼。隨便選一個,不影響結果。

無論哪種方式,您都可以從 Console 讀取輸出 選項卡(按 F12Ctrl + Shift + I 對於大多數瀏覽器)。或者,您可以右鍵單擊頁面並選擇“檢查” 從菜單中。在 Firefox 中,它是 “檢查元素” .

.is(":hidden") 將返回 true 如果所選元素被隱藏。如果它沒有隱藏,那麼它將返回 false .

讓我們在隱藏的 .first-element 上使用這個方法 :

var myElement = ".first-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));

如果您檢查 控制台 在瀏覽器的標籤頁中,您應該會看到以下輸出:

.first-element is hidden?: true

相當簡單,對吧?我們可以使用下一個方法is(":visible") 來驗證我們當前的結果。

is(":visible")檢查元素是否隱藏

is(":visible") 將測試元素的可見性並返回 true 如果所選元素可見,則返回 false 如果它被隱藏了。

如您所見,它與 .is(":hidden") 正好相反 方法。這意味著它們不能為同一個元素返回相同的值。至少不是同時。

讓我們在 first-element 上測試一下 並觀察結果:

var myElement = ".first-element";
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));

正如預期的那樣,它將輸出一個 false 價值:

.first-element is visible?: false

請注意,在使用隱藏輸入時,您也會得到相同的結果:

<input type="hidden" class="inp-element" value="3487">

雖然 hidden 傳入我們的 input 的參數 通過 type 的元素 屬性,它仍然產生相同的結果。

到目前為止,一切都很好。現在讓我們將我們的遊戲向前推進一步,看看如何測試已被 CSS 修改的可見性。

.css("visibility")檢查元素是否隱藏

讓我們在 DOM 中再添加兩個項目:

<p class="second-element">This is the second paragraph.</p>
<p class="third-element">This is the third paragraph.</p>

刷新/重新加載您的頁面並確認添加了新元素。

現在我們將更改 visibility second-element 的屬性 .為此,您可以創建一個 CSS 文件並將其鏈接到您的 HTML 文件或在 <head> 中編寫您的 CSS 代碼 HTML 文件的標籤,在 <style></style> 內 標籤:

.second-element{
    visibility: hidden; 
}

現在這部分有點棘手。在重新加載頁面之前,好好看看 third-element 的當前位置 .如果刷新頁面,您會注意到 second-element 不再可見,但仍佔用相同的空間 .它不可見,但 third-element 的位置 意味著它仍然存在。事實上,如果我們繼續為這個元素運行我們之前的函數:

var myElement = ".second-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));

我們會得到它不是的結果 隱藏,但仍然可見:

免費電子書:Git Essentials

查看我們的 Git 學習實踐指南,其中包含最佳實踐、行業認可的標準以及隨附的備忘單。停止谷歌搜索 Git 命令並真正學習 它!

.second-element is hidden?: false
.second-element is visible?: true

原因是當你設置 visibility hidden 的屬性 ,它變得不可見但是 它仍然由瀏覽器呈現,因此它佔用了它的初始空間。如果元素具有 height,大多數瀏覽器會認為元素可見 和/或 width .換句話說,任何維度為零的元素都被認為是隱藏的。

現在我們知道我們在處理什麼,我們所要做的就是檢查 visibility 元素的屬性設置為 hidden ,而不是元素是否本身hidden

var myElement = ".second-element";
console.log(myElement + " is visibility === hidden?: " + ($(myElement).css("visibility") === "hidden"));

這將返回 true

.second-element is visibility === hidden?: true

在此過程中,讓我們弄清楚還有哪些其他 CSS 屬性會影響可見性。

.css("display")檢查元素是否隱藏

另一個常用於隱藏元素的 CSS 屬性是 display .我們已經有了 third-element 在我們的 DOM 中準備好。所以我們要做的就是設置它的 displaynone

.third-element {
    display: none; 
}

刷新頁面後,您可以看到它不再可見了。

現在,關於 display: none; 的好處 是我們可以通過使用我們之前的is(":hidden")正確選擇它 和 is(":visible") 方法:

var myElement = ".third-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visible?: " + $(myElement).is(":visible"));

由於瀏覽器不呈現 third-element ,我們得到了預期的結果:

.third-element is hidden?: true
.third-element is visible?: false

我們也可以使用 .css() 來選擇它 選擇器:

var myElement = ".third-element";
console.log(myElement + " is css.display == none?: " + ($(myElement).css("display") === "none"));

結果我們會得到以下輸出:

.third-element is css.display == none?: true

使元素不可見的另一種方法是將其不透明度設置為零。在下一節中,我們將創建一個新元素,更改其不透明度,並檢查它是否可見。

.css("opacity")檢查元素是否隱藏

通過不透明度使項目不可見的行為類似於設置 visibility hidden 的屬性 .為此,我們將再添加兩個元素以更好地觀察變化:

<p class="fourth-element">This is the fourth paragraph.</p>
<p class="visible-element">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis corrupti inventore, et beatae accusantium perferendis?</p>

現在讓我們添加一些填充以強調 fourth-element 佔用的空間 ,並將其不透明度設置為零:

.fourth-element {
    padding: 30px;
    opacity: 0;
}

刷新頁面,你會注意到沒有fourth-element .它有尺寸,因此它被渲染,但它不是不透明的,所以它是不可見的。

所以很自然,以下所有方法:

var myElement = ".fourth-element";
console.log(myElement + " is hidden?: " + $(myElement).is(":hidden"));
console.log(myElement + " is visibility === hidden?: " + ($(myElement).css("visibility") === "hidden"));
console.log(myElement + " is css.display == none?: " + ($(myElement).css("display") === "none"));

將返回 false

.fourth-element is hidden?: false
.fourth-element is visibility === hidden?: false
.fourth-element is css.display == none?: false

捕捉的唯一方法 這個不可見的元素,就是使用.css("opacity") 選擇器:

var myElement = ".fourth-element";
console.log(myElement + " is opacity lesser than or equal to 0?: " + ($(myElement).css("opacity") <= "0"));

這將返回 true

.fourth-element is opacity lesser than or equal to 0?: true

我們關於如何使用 jQuery 檢查元素是否隱藏的教程到此結束!

結論

在本教程中,我們學習瞭如何使用 jQuery 選擇器檢查元素的可見性。而 .is(":hidden") , is(":visible") , 和 .css("display") 選擇器是選擇非渲染元素的好選擇,.css("visibility").css("opacity") 最適合渲染但人眼不可見的元素。


Tutorial JavaScript 教程
  1. 將 PureScript 與您的 JavaScript 應用程序集成

  2. 使用 Web Audio API 創建 10 段均衡器

  3. 如何使用 React 和 Sanity 創建單頁應用程序

  4. 是什麼讓 WebAssembly 快速?

  5. 在 php/javascript 中打開/瀏覽對話框?

  6. 使用 Astro 建立博客

  7. 天才之路:初學者#5

  1. 語用類型:動態、靜態、漸進、弱類型、強類型和無類型語言

  2. 教程:使用 can-migrate 自動升級到 CanJS 3

  3. 本網站不適用於禁用 JavaScript 的情況

  4. 反應和效果掛鉤

  5. 使用 NextJS 和 Firebase 進行服務器端身份驗證

  6. MooTools Zebra 表格插件

  7. React-Router:動畫過渡 DIY

  1. Google Maps API V3 中的 API 密鑰是什麼?

  2. JavaScript 字符串搜索方法舉例說明

  3. Web 平台中的從右到左 (1/6)

  4. DIY VS 代碼擴展 2:發布