JavaScript中的classList.contains

在 JavaScript 中，使用 classList 属性可以方便地获取元素的类列表，并执行一系列的操作，包括添加、删除、切换类名以及判断元素是否包含某个类名。

其中，classList.contains 方法可以用于判断元素是否包含指定类名。该方法接受一个参数，即需要判断的类名，如果元素包含该类名则返回 true，否则返回 false。

语法

element.classList.contains(className);

参数说明：

• className：需要判断的类名，字符串类型。

返回值：

• true：元素包含指定的类名。
• false：元素不包含指定的类名。

示例

<div id="myDiv" class="foo bar"></div>

// 获取元素
var myDiv = document.getElementById("myDiv");

// 判断元素是否包含类名
console.log(myDiv.classList.contains("foo")); // output: true
console.log(myDiv.classList.contains("baz")); // output: false

兼容性

classList.contains 方法兼容性较良好，支持大多数现代浏览器，包括：

• IE 10+
• Edge
• Firefox
• Chrome
• Safari

注意事项

• 该方法返回的是一个布尔值，可以用于条件判断。
• 该方法区分大小写，如果需要判断元素是否包含多个类名，需要多次调用该方法。
• 如果需要判断当前元素及其子元素是否包含指定类名，可以使用 querySelectorAll 方法结合 classList.contains 方法实现。

var elements = document.querySelectorAll('.my-class');

// 判断当前元素及其子元素是否包含指定类名
for (var i = 0; i < elements.length; i++) {
    var element = elements[i];
    if (element.classList.contains('foo')) {
        console.log('包含foo类名的元素：', element);
    }
}