使用 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() 方法从元素中删除一个或多个类。 如果元素上不存在该类，则该方法将忽略该类并且不会引发错误。
相关文章
使用 CSS 和 JavaScript 制作文本闪烁
发布时间：2023/04/28 浏览次数：146 分类：CSS
-
本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。
在 PHP 变量中存储 Div Id 并将其传递给 JavaScript
发布时间：2023/03/29 浏览次数：69 分类：PHP
-
本文教导将 div id 存储在 PHP 变量中并将其传递给 JavaScript 代码。
在 JavaScript 中从字符串中获取第一个字符
发布时间：2023/03/24 浏览次数：93 分类：JavaScript
-
在本文中，我们将看到如何使用 JavaScript 中的内置方法获取字符串的第一个字符。
在 JavaScript 中获取字符串的最后一个字符
发布时间：2023/03/24 浏览次数：141 分类：JavaScript
-
本教程展示了在 javascript 中获取字符串最后一个字符的方法
