JavaScript 中 classList.contains 怎么检测 DOM 元素是否包含某个样式类-js教程-PHP中文网

classlist.contains 是用于精确判断 dom 元素是否拥有指定 css 类名的方法，返回布尔值；需传入不带点号的类名字符串，区分大小写且全匹配，要求元素存在并已挂载。

javascript 中 classlist.contains 怎么检测 dom 元素是否包含某个样式类

classList.contains 是 DOM 元素 classList 对象提供的一个方法，用于**精确判断该元素是否拥有指定的 CSS 类名**（字符串形式），返回布尔值 true 或 false。

基本用法：直接传入类名字符串

语法很简单：

element.classList.contains('your-class-name')

注意：不能带点号（.），只传类名本身。例如检测是否有 active 类，写 'active'，不是 '.active'。

JavaStoryDevelop

你接手一个需求时，是不是经常这样："改一个小字段 → 结果把不相关的代码也改了"、"需求说得很模糊 → 做着做着发现跑偏了"、"数据库加个字段 → 上线才发现漏了数据兼容"、"做了个新功能 → 一个月后自己都忘了当时怎么设计的"、"写到一半被中断 → 再回来不知道从哪继续"；这个 Skill 就是专门解决这些问题的。它会自动探测你的项目环境（JDK、Spring Boot、ORM、数据库、前端框架），记在

下载

常见使用场景和注意事项

必须确保元素存在且已挂载：如果 element 是 null 或尚未插入 DOM，调用会报错 Cannot read property 'contains' of undefined。建议先做存在性检查：

if (element && element.classList) {
  const hasActive = element.classList.contains('active');
}

区分大小写且全匹配：contains('Btn') 不会匹配 btn 或 button-active；它只认完全一致、大小写敏感的独立类名。
不支持通配符或正则：不能用 contains('col-*') 这类写法。如需模糊匹配，得手动遍历 classList 数组或用 className.match(/.../)。

对比其他判断方式

element.className.includes('active')：容易误判，比如 'inactive' 也会被当成包含 'active'；
element.getAttribute('class').includes(...)：同上，且未处理空格、重复类等边界情况；
classList.contains 是标准、安全、语义清晰的首选方式。

实际小例子

假设有一个按钮：

<button id="myBtn" class="btn btn-primary active">提交</button>

JS 中检测：

const btn = document.getElementById('myBtn');
console.log(btn.classList.contains('active'));   // true
console.log(btn.classList.contains('disabled')); // false
console.log(btn.classList.contains('btn'));      // true

不复杂但容易忽略细节，用对了就能准确又可靠地判断样式类是否存在。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南