JavaScript判断指定的元素是否含有active类的常用方法
更新时间：2026年03月11日 08:31:00 作者：Never_Satisfied
本文介绍了在JavaScript中判断一个元素是否包含active类的几种方法,包括现代推荐的classList.contains()方法,以及兼容性较低的className属性和matches()方法,对于需要兼容老浏览器的项目,推荐使用正则表达式来精确匹配类名,需要的朋友可以参考下
示例：在 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类内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
JavaScript中var、let和const的用法及区别详解
在JavaScript中let和const是用于声明变量的关键字,并且它们相较于var具有更加灵活和安全的特性,这篇文章主要介绍了JavaScript中var、let和const的用法及区别的相关资料,需要的朋友可以参考下2025-04-04
本篇文章主要介绍了IScroll5实现下拉刷新上拉加载的功能实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-08-08
Javascript中Math.max和Math.max.apply的区别和用法详解
这篇文章主要介绍了Javascript中Math.max和Math.max.apply的区别和用法,本文给大家啊介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
Javascript 拖拽雏形(逐行分析代码，让你轻松了拖拽的原理)
这篇文章主要介绍了Javascript 拖拽雏形(逐行分析代码，让你轻松了拖拽的原理),需要的朋友可以参考下2015-01-01
这篇文章主要为大家详细介绍了JS实现滑动条案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了微信小程序仿微信运动步数排行(交互)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
我们在烧水的过程中去干了别的事情,就属于异步模式,异步模式中不会等待异步任务的结束才开始执行下一个同步的任务,都是开启过后就立即执行下一个任务,下面这篇文章主要给大家介绍了如何通过一文带你简单封装JS下的异步任务对象的相关资料,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了微信小程序日期增加时间完成订单失效倒计时效果,在我们日常购物过程中经常会遇到这样的功能,本文通过示例代码给大家详细讲解,需要的朋友参考下吧2024-04-04
这篇文章主要介绍了JS实现控制表格内指定单元格内容对齐的方法,涉及javascript操作表格单元格内容样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
TypeScript声明文件是一种包含TypeScript类型信息的.d.ts文件,它允许开发者为已存在的JavaScript代码提供类型注解,这些文件不包含可执行代码,下面就来详细的介绍一下TypeScript声明文件的实现,感兴趣的可以了解一下2025-12-12
最新评论