文章内容
2023/9/4 17:54:33,作 者: 黄兵
classList.toggle 理解
最近在判断某个元素是否存在 class=“xxx” 的值，例如下面这种写法：
if (targetElement) {
// Toggle the 'd-none' class to show/hide
if (targetElement.classList.contains('d-none')) {
targetElement.classList.remove('d-none');
} else {
targetElement.classList.add('d-none');
}
}这种写法没问题，但是我们可以使用 classList.toggle 这种方式简化代码，如下：
var targetElement = document.getElementById(targetId);
if (targetElement) {
// 切换d-none类的存在
targetElement.classList.toggle('d-none');
}这里就需要详细说一下这个 classList.toggle，下面是解释：
classList.toggle 是用于操作 DOM 元素的类列表的方法。DOM 元素的类列表是一个包含元素的所有类名的 DOMTokenList 对象，它具有以下常用方法之一：toggle。
toggle 方法用于在元素的类列表中添加或删除指定的类名，并返回一个布尔值以指示类名是否已添加或删除。这个方法有两种用法：
添加类名并返回
true： 如果元素的类列表中没有指定的类名，则将其添加，并返回true。如果类名已存在于类列表中，则不执行任何操作，仍然返回true。删除类名并返回
false： 如果元素的类列表中已经存在指定的类名，那么将其删除，并返回false。如果类名不存在于类列表中，则不执行任何操作，仍然返回false。
这是 classList.toggle 方法的语法：
element.classList.toggle(className);
element: 要操作类列表的 DOM 元素。className: 要添加或删除的类名。
下面是一个示例，演示如何使用 classList.toggle：
<!DOCTYPE html>
<html>
<head>
<title>classList.toggle 示例</title>
</head>
<body>
<div id="myDiv" class="box">这是一个 DIV 元素</div>
<button onclick="toggleClass()">切换类名</button>
<script>
function toggleClass() {
var myDiv = document.getElementById("myDiv");
var hasClass = myDiv.classList.toggle("highlight");
if (hasClass) {
console.log("highlight 类名已添加");
} else {
console.log("highlight 类名已删除");
}
}
</script>
</body>
</html>
运行效果，点击此处查看。
在上面的示例中，当单击按钮时，toggleClass 函数将尝试在 myDiv 元素的类列表中添加或删除 "highlight" 类名，并根据操作结果打印相应的消息。
classList.toggle 是一个方便的方法，用于在 DOM 元素的类列表中添加或删除类名，并可以用来控制元素的样式和可见性。
同时也可以精简代码，是代码简洁明了。
评论列表