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

使用 classList.contains() 方法检查元素是否没有特定的类,例如 if (!el.classList.contains('my-class')) {} 。 如果元素没有提供的类,则该方法返回 false,否则返回 true

这是本文中示例的 HTML。

<!DOCTYPE html>
<html lang="en">
  <head>
    <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 代码。

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() 方法返回 true,否则返回 false。

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,反之亦然。

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

如果元素不包含 bg-salmon 类,则运行 if 块,否则运行 else 块。

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() 方法来避免这种情况。

const box = document.getElementById('box');

// ✅ 向元素添加类
box.classList.add('first-class', 'second-class');

// ✅ 从元素中删除类
box.classList.remove('third-class', 'fourth-class');

classList.add() 方法向一个元素添加一个或多个类。 如果元素上已存在任何提供的类,则省略该类。

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

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » 使用 JS 检查元素是否没有特定的类