JavaScript判断指定的元素是否含有active类的常用方法

示例：在 JavaScript 中判断一个元素是否包含 active 类。主要有以下几种常用方法：

1. 使用classList.contains()（推荐）

这是现代浏览器最简洁、最可靠的方法，返回布尔值。

const element = document.querySelector('.your-element');
if (element.classList.contains('active')) {
    console.log('元素包含 active 类');
} else {
    console.log('元素不包含 active 类');
}

2. 使用className属性 + 正则 /indexOf

如果需兼容非常古老的浏览器（如 IE8 及以下），可以通过检查 className 字符串实现。

方法 A：正则表达式（精确匹配，避免误判）

const element = document.querySelector('.your-element');
if (new RegExp('\\bactive\\b').test(element.className)) {
    console.log('包含 active 类');
}

方法 B：indexOf（简单但有缺陷，如active是其他类名的一部分时可能误判）

if (element.className.indexOf('active') !== -1) {
    // 会误判如 "inactive" 也包含 "active"
}

不推荐直接用 indexOf，因为可能匹配到类似 inactive 这样的类名。

3. 使用matches()方法

利用 CSS 选择器判断元素是否匹配某个选择器。

if (element.matches('.active')) {
    console.log('包含 active 类');
}

matches 兼容性较好（IE9+ 需加前缀 msMatchesSelector），但主要是用于选择器匹配，也可以用来检查类名。

总结

• 现代项目 → 首选 element.classList.contains('active')。
• 需要兼容非常老的浏览器 → 使用正则表达式 /\bactive\b/.test(element.className)。
• 顺便一提：也可用 element.matches('.active')，同样简洁，但语义上不如 classList.contains 直接。

到此这篇关于JavaScript判断指定的元素是否含有active类的常用方法的文章就介绍到这了,更多相关JavaScript判断元素是否包含active类内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！