JavaScript >> Javascript 文檔 >  >> JavaScript

如何使用 JavaScript 檢查屬性是否存在

要檢查 HTML 元素是否具有特定屬性,可以使用 hasAttribute() 方法。此方法返回 true 如果指定的屬性存在,否則返回false .

假設您有以下 HTML 元素:

<a href="http://example.com" title="Example" data-role="self">Example Page</a>

以下示例檢查 title 錨元素的屬性存在:

const anchor = document.querySelector('a');

const isTitle = anchor.hasAttribute('title');

console.log(isTitle); // true

hasAttribute() 方法也適用於 HTML5 data-* 屬性。

以下示例演示瞭如何使用 hasAttribute() 檢查錨元素是否具有 data-role 的方法 屬性:

const anchor = document.querySelector('a');

const isRole = anchor.hasAttribute('data-role');

console.log(isRole); // true

為了檢查一個 HTML 元素是否有任何屬性,JavaScript 提供了 hasAttributes() 方法:

console.log(anchor.hasAttributes()); // true

hasAttribute() 該方法適用於所有現代瀏覽器,以及 IE9 及更高版本。


Tutorial JavaScript 教程
  1. JavaScript this - 要知道的四個規則

  2. 我在學習什麼:NodeJS 和 TypeScript

  3. 我創建了一個列表,包含構建下一個 React Native 應用程序所需的一切

  4. 掌握你的下一個自由項目

  5. webpack 5 &next.js 10 - 如何將解析後備添加到配置

  6. 製作自己的 EventEmitter 的經驗教訓

  7. Var 和 Let 和有什麼不一樣?

  1. 無法使用 npm 和 webpack 設置 NODE_ENV=production

  2. 如何優化您的 GatsbyJS 網站以粉碎 LightHouse Google 報告

  3. 如何在javascript中刪除一組表情符號的最後一個表情符號?

  4. 使用樣式化組件創建應用程序的暗模式

  5. JavaScript 中的原始類型介紹和示例

  6. 將對象轉換為對像數組?

  7. 對話框元素:創建明天的模態窗口的方法

  1. 配置最佳 Postgres-Nest 項目的秘訣 - 第 1 部分

  2. 在 Heroku 上部署 Rails API/React 應用程序,第 2 部分:前端部署

  3. 為什麼我選擇 Vue.js 作為我的自由職業者利基

  4. 使用 Vanilla Javascript 構建天氣應用程序