JavaScript >> Javascript 文檔 >  >> Tags >> CSS

在 JavaScript 中檢查元素是否包含 CSS 類

在原生 JavaScript 中,您可以使用 contains() classList 對象提供的方法來檢查任何元素是否包含特定的 CSS 類。此方法返回 true 如果類存在,否則 false .

假設我們有以下 HTML 元素:

<button class="primary disabled">Subscribe Now</button>

我們要檢查 <button> 標籤包含 disabled 班級。第一步是從 DOM 中獲取對元素的引用:

const button = document.querySelector('button');

接下來,使用 classList.contains() 驗證元素是否包含 disabled 的方法 類:

if (button.classList.contains('disabled')) {
    console.log('Yahhh! Class is found.');
} else {
    console.log('Class does not exist.');
}

classList.contains() 該方法適用於所有現代瀏覽器,並且有可用的 polyfill 可支持舊版瀏覽器(直到 Internet Explorer 6)。

或者,如果您想支持舊瀏覽器 不使用任何 polyfill,只需使用元素的 className 屬性來檢查該類是否存在:

// convert `class` attribute into string tokens
const tokens = button.className.split(' ');

// check if tokens array contains `disabled`
if (tokens.indexOf('disabled') !== -1) {
    console.log('Yahhh! Class is found.');
} else {
    console.log('Class does not exist.');
}

在上面的代碼中,我們首先拆分了className 屬性值,指的是class 屬性,轉換為字符串標記。稍後,我們使用 indexOf() tokens 上的方法 數組來檢查它是否包含 disabled 價值。

您可能在想為什麼不簡單地使用 button.className.indexOf('disabled') !== -1 陳述?問題是它會返回 true 即使您要查找的類是另一個類名的一部分。


Tutorial JavaScript 教程
  1. get 訪問器會產生每個實例的分配成本嗎?

  2. 抓取和爬行 Yelp 評論

  3. 可視化冒泡排序 (Vue.js)

  4. 如何在 discord.js 中使用我自己的“say”命令向特定頻道發送消息?

  5. Nx - JS 生態系統中增長最快的 monorepo 解決方案

  6. 5 個 jQuery 通知插件

  7. 為 Nodejs 部署配置 Vultr 的步驟

  1. Angular 中的 TDD - 進一步的 HTTP 測試

  2. 使用 WebAssembly 和 Go 的示例項目

  3. 按鈕反應樣式的組件

  4. node.js在linux上表達權限錯誤

  5. 為什麼有些 API 響應代碼是主觀的?

  6. 將你的庫包裝在一個 React 鉤子中

  7. Vue 可組合 - 數組分頁

  1. 使用 200.html 部署單頁應用

  2. Angular vs. React:比較 7 個主要特性

  3. 從頭開始創建 Netflix 克隆:JavaScript PHP + MySQL 第 67 天

  4. 在 JavaScript 中顯示 ZX-Spectrum 編碼的屏幕