使用 JS 检查元素是否没有特定的类

作者

使用 JS 检查元素是否没有特定的类

Check if an Element does NOT have specific Class using JS

使用该classList.contains()方法检查元素是否没有特定类。

如果元素没有提供的类，则该方法返回false，否则true返回。

这是示例的 HTML。

索引.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>bobbyhadz.com</title>
    <meta charset="UTF-8" />

    <style>
      .bg-salmon {
        background-color: salmon;
      }
    </style>
  </head>

  <body>
    <div id="box" class="bg-salmon">Box 1</div>

    <script src="index.js"></script>
  </body>
</html>

这是相关的 JavaScript 代码。

索引.js
const box = document.getElementById('box');

if (!box.classList.contains('bg-salmon')) {
  console.log('Element does NOT have class');
} else {
  console.log('Element has class');
}

我们使用
classList.contains
方法来检查元素是否没有类名。

如果元素具有提供的类，则
该contains()方法返回，否则返回。truefalse

索引.js
const box = document.getElementById('box');

// 👇️ true
console.log(box.classList.contains('bg-salmon'));

// 👇️ false
console.log(box.classList.contains('does-not-exist'));

我们使用逻辑 NOT (!)运算符来否定从方法返回的结果contains()。

当与布尔值一起使用时，如示例中所示，运算符翻转值，例如true变为false，反之亦然。

索引.js
console.log(!true); // 👉️ false
console.log(!false); // 👉️ true

如果元素不包含类bg-salmon，我们的if块运行，否则，else块运行。

索引.js
const box = document.getElementById('box');

if (!box.classList.contains('bg-salmon')) {
  console.log('Element does NOT have class');
} else {
  console.log('Element has class');
}

请注意，如果您正在检查某个类是否不存在，因为您不想添加它两次，则可以使用该方法classList.add()来避免这种情况。

索引.js
const box = document.getElementById('box');

// ✅ Add classes to element
box.classList.add('first-class', 'second-class');

// ✅ Remove classes from element
box.classList.remove('third-class', 'fourth-class');
该classList.add()方法向元素添加一个或多个类。如果元素上已存在任何提供的类，则省略该类。

该classList.remove()方法从元素中删除一个或多个类。如果该类在元素上不存在，则该方法将忽略该类并且不会抛出错误。