推荐使用 element.classlist.contains("类名") 判断元素是否含有指定类名,它返回布尔值、自动处理空格和边界问题且不修改dom;兼容旧浏览器时可用包裹空格的字符串匹配。

用 element.classList.contains("类名") 最直接、最推荐。
使用 classList.contains()(标准且简洁)
现代浏览器都支持 classList API,它专为操作类名设计,安全可靠:
-
element.classList.contains("active")返回布尔值:true表示有该类,false表示没有 - 自动处理空格、重复类、大小写敏感等细节,无需手动解析
className - 即使元素没有
class属性,也不会报错,返回false
兼容旧浏览器:检查 className 字符串(备用方案)
如果需支持 IE9 及更早版本,可退回到字符串匹配,但要注意边界问题:
- 不能直接用
element.className.indexOf("active") !== -1,否则会误判"inactive"包含"active" - 正确做法是加空格包裹后匹配:
(" " + element.className + " ").indexOf(" active ") !== -1 - 或用正则:
/^active$|^active\s|\sactive\s|\sactive$/.test(element.className)(较重,一般不推荐)
注意点:classList 是只读属性,但 contains() 不改变 DOM
element.classList 本身不可赋值(如 el.classList = "new" 会报错),但它的方法如 contains、add、remove 都是安全的读/写操作。调用 contains() 完全不会修改元素状态,纯判断。
小技巧:一次检查多个类名
如果要确认是否同时包含多个类,可以链式调用或用数组判断:
- 分开写:
el.classList.contains("btn") && el.classList.contains("primary") - 简洁写法:
["btn", "primary"].every(cls => el.classList.contains(cls))
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











