JavaScript classList.toggle
最后修改于 2025 年 4 月 2 日
在本文中，我们将探讨 JavaScript 中的 classList.toggle 方法。此方法对于动态 CSS 类操作至关重要，它允许开发人员轻松地为元素添加或删除类。
基本定义
classList.toggle 方法会为元素添加或删除 CSS 类。如果类已存在，则会将其删除；如果不存在，则会添加它。这提供了一种在视觉状态之间切换的简单方法。
如果添加了类，则该方法返回 true；如果删除了类，则返回 false。它还可以选择接受第二个布尔参数来强制添加或删除该类。
基本的 classList.toggle
此示例演示了如何为 div 元素切换简单的 CSS 类。
<!DOCTYPE html>
<html>
<head>
<title>Basic classList.toggle</title>
<style>
.highlight {
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div id="content">Click me to highlight!</div>
<script>
const element = document.getElementById('content');
element.addEventListener('click', function() {
this.classList.toggle('highlight');
});
</script>
</body>
</html>
在此基本示例中，我们有一个带有事件监听器的 div 元素。单击时，会在元素上切换 highlight 类。
这演示了 classList.toggle 用于动态更改元素样式的基本用法。该方法会自动处理类的添加和删除。
通过按钮控制切换
此示例显示了如何使用单独的按钮元素切换类。
<!DOCTYPE html>
<html>
<head>
<title>Toggle with Button</title>
<style>
.active {
color: red;
border: 2px solid red;
}
</style>
</head>
<body>
<p id="text">This text can be activated</p>
<button id="toggleBtn">Toggle Active State</button>
<script>
const text = document.getElementById('text');
const button = document.getElementById('toggleBtn');
button.addEventListener('click', function() {
text.classList.toggle('active');
});
</script>
</body>
</html>
这里我们有一个段落和一个按钮。单击按钮时，会在段落元素上切换 active 类。
这演示了如何通过单独的元素来控制 classList.toggle。样式更改保留在 CSS 中，而 JavaScript 处理状态更改。
使用布尔参数强制切换
此示例演示了 toggle 的可选强制参数。
<!DOCTYPE html>
<html>
<head>
<title>Forced Toggle</title>
<style>
.hidden {
display: none;
}
</style>
</head>
<body>
<div id="box">Content to show/hide</div>
<button onclick="showContent()">Show</button>
<button onclick="hideContent()">Hide</button>
<script>
const box = document.getElementById('box');
function showContent() {
box.classList.toggle('hidden', false);
}
function hideContent() {
box.classList.toggle('hidden', true);
}
</script>
</body>
</html>
在此示例中，我们有两个按钮，它们会强制添加或删除 hidden 类，而不是切换。第二个参数控制此行为。
这表明 classList.toggle 可用于显式添加或删除类而不检查当前状态。强制参数使该方法表现得像 add 或 remove。
切换多个类
此示例显示了如何同时切换多个类。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Classes</title>
<style>
.big {
font-size: 2em;
}
.blue {
color: blue;
}
</style>
</head>
<body>
<p id="text">Click to change my appearance</p>
<script>
const text = document.getElementById('text');
text.addEventListener('click', function() {
this.classList.toggle('big');
this.classList.toggle('blue');
});
</script>
</body>
</html>
在这里，我们在单击时为段落元素切换两个不同的类。这两个类会一起添加或删除，从而产生复合视觉变化。
这演示了如何将多个 classList.toggle 调用组合使用以创建更复杂的样式更改。每个类都可以独立于其他类进行切换。
深色/浅色模式切换
此示例为页面创建了一个完整的深色/浅色模式切换。
<!DOCTYPE html>
<html>
<head>
<title>Dark Mode Toggle</title>
<style>
body {
background: white;
color: black;
transition: all 0.3s ease;
}
body.dark {
background: #222;
color: white;
}
</style>
</head>
<body>
<h1>Dark Mode Example</h1>
<p>Click the button to toggle dark mode</p>
<button id="modeToggle">Toggle Dark Mode</button>
<script>
const toggle = document.getElementById('modeToggle');
toggle.addEventListener('click', function() {
document.body.classList.toggle('dark');
});
</script>
</body>
</html>
在此实际示例中，单击按钮会在 body 元素上切换 dark 类。CSS 处理深色模式的所有样式更改。
这演示了 classList.toggle 的实际用例。transition 属性可以在两种状态之间创建平滑的动画。
来源
在本文中，我们展示了如何在 JavaScript 中使用 classList.toggle。此方法对于 Web 开发中的动态类操作和状态管理至关重要。
作者
列出 所有 JS DOM 教程。