如何使用 JavaScript 在HTML元素上切换 CSS 类

今天，我们正在探索一种简单而有效的技术，用于使用JavaScript在HTML 元素上切换 CSS 类。我们将在按钮元素上演示这一点，并仅用几行代码突出显示视觉外观和状态的控制。

创建 HTML 按钮

<button id="button" class="red">STOP</button>

我们使用一个由id “button”标识的按钮元素来启动我们的演示，并带有一个初始类red.

使用 CSS 设置按钮样式

body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: grey;
}
 
button {
padding: 10px;
font-size: 1.1em;
border: none;
border-radius: 10px;
border: 1px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
}
 
.green {
background: green;
color: white;
}
 
.red {
background: red;
color: white;
}

上面的 CSS 做了两件事：它改进了按钮的外观并定义了两个状态类 –.green和.red。这些类将在 JavaScript 中交替出现，从而影响按钮的颜色和相关的用户消息。

使用 JavaScript 进行切换

const button = document.getElementById("button");
const buttonPressed = (e) => {
e.target.classList.toggle("green");
e.target.classList.toggle("red");
e.target.innerText = e.target.innerText.trim() === "STOP" ? "GO" : "STOP";
};
button.addEventListener("click", buttonPressed);

在 JavaScript 代码片段中，我们首先使用按钮元素的 id 访问按钮元素"button"。buttonPressed然后定义该函数以对该按钮上的单击事件做出反应。每次单击，都会使用 切换我们的按钮元素上的.green和类。这给了我们红色和绿色状态之间的视觉相互作用。.redclassList.toggle()

此外，由于采用了三元运算符，按钮的文本还可在“STOP”和“GO”之间切换。该运算符检查当前按钮的文本是否为“STOP”，如果为“true”，则将其更改为“GO”，如果不是，则恢复为“STOP”。这在按钮的外观和其声明的状态之间创建了清晰的视觉关联。

最终结果

专业提示：通过应用此技术，您可以在设计中创建丰富的交互式体验。考虑一个照片库，其中切换类会改变布局视图，或者博客摘录上的“阅读更多”功能可扩展内容视图。该概念还可以应用于在网站上切换深色和浅色模式，提供可定制的用户体验。