資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 HTML 的 JavaScript 中測試元素是否包含某個類？
在 JavaScript 中，我們可以檢查 HTML 文件中的 HTML 元素是否包含特定的類。在網頁開發過程中，開發者會使用許多類，有時會將相似的類分配給不同的元素，這些元素在 CSS 中需要相同的樣式。在這個過程中，開發者可能會忘記賦予特定元素的類，那麼開發者可能需要使用 JavaScript 檢查元素內部的類。在本教程中，我們將討論如何測試 JavaScript 中的元素是否包含類。
要檢查類，我們可以使用元素的 `classList` 屬性的 `contains()` 方法。
讓我們詳細討論 `contains()` 方法 -
使用 contains() 方法
`contains()` 是元素 `classList` 屬性的一個方法，該屬性包含目標元素包含的所有類的列表，為了檢查列表中是否存在特定類，我們可以使用 `contains()` 方法，該方法將類名作為字串引數，並返回布林值。如果元素包含傳遞的類名，則返回 true，否則返回 false。
語法
以下語法用於在 `classList` 屬性上實現 `contains()` 方法：
var var_name = targetedElement.classList.contains("className");
在此語法中，我們對元素使用 `classList`，然後透過將其傳遞到 `contains()` 方法中來檢查特定類，以檢視目標元素是否包含它。
讓我們透過在程式碼示例中實際實現它來理解它 -
演算法
**步驟 1** - 在第一步中，我們將定義一個 HTML 元素，其中包含一個特定的類。
**步驟 2** - 在下一步中，我們將透過其 ID 獲取目標元素，然後在其上使用 `classList` 屬性和 `contains()` 方法。
**步驟 3** - 在最後一步中，我們將定義一個 JavaScript 函式，該函式將在單擊按鈕時被呼叫，並且它包含在使用者螢幕上顯示輸出的邏輯。
示例 1
下面的示例將說明如何使用 `contains()` 方法來檢查元素是否包含類 -
<!DOCTYPE html>
<html>
<body>
<h2>Testing if an element contains class in JavaScript in HTML</h2>
<p id="result" class="myClass">We will check the class for this element. </p>
<button onclick="display()">click to check the class</button>
<script>
var myElement = document.getElementById("result");
var classTest = myElement.classList.contains("myClass");
function display() {
if (classTest) {
myElement.innerHTML = "<b>Yes, the grabbed element contains the specified class</b>";
} else {
myElement.innerHTML = "<b>No, the grabbed element does not contains the specified class</b>"
}
}
</script>
</body>
</html>
在上面的示例中，我們使用了目標元素上 `classList` 屬性的 `contains()` 方法，並將類名作為字串傳遞給該方法，以檢查元素是否包含它。
讓我們討論另一個示例，我們將檢查當目標元素包含多個類時 `contains()` 方法的行為。
在這個示例的演算法中，我們只需要在定義的元素中新增多個類，其餘部分與之前的示例相同。
示例 2
下面的示例將顯示如果元素包含多個類，`contains()` 方法的行為 -
<!DOCTYPE html>
<html>
<body>
<h2>Testing if an element contains class in JavaScript in HTML </h2>
<p id="result" class="myClass class1 class2">We will check the class for this element. </p>
<button onclick="display()">click to check the class</button>
<script>
var myElement = document.getElementById("result");
var classTest = myElement.classList.contains("myClass");
function display() {
if (classTest) {
myElement.innerHTML = "<b>Yes, the grabbed element contains the specified class</b>";
} else {
myElement.innerHTML = "<b>No, the grabbed element does not contains the specified class</b>"
}
}
</script>
</body>
</html>
在這個示例中，我們定義了包含多個類的 HTML 元素，然後使用與前一個示例相同的邏輯來檢查元素是否包含該類。我們可以清楚地看到兩個示例的輸出相同，這意味著 `contains()` 方法也可以檢查元素是否包含特定類，即使該元素包含多個類。
在本教程中，我們討論了元素 `classList` 屬性的 `contains()` 方法，用於測試 JavaScript 中的元素是否包含該類。我們已經透過與每個場景相關的程式碼示例的實際實現，討論了此方法在不同場景下的行為，其中元素包含多個類和單個類。
9K+ 瀏覽量
