📅 最后修改于: 2023-12-03 14:50:12.471000 🧑 作者: Mango
在开发网页时，我们经常需要在特定条件下改变元素的样式。如何在点击事件中切换类名是一项基本任务。
document.getElementById("myElement").onclick = function() {
this.classList.toggle("newClassName");
};
函数toggle()将在元素的类名列表中添加一个新类名，如果它不存在，或者删除一个类名，如果它已存在。这就使得我们可以在点击事件上切换元素的类名。
为了更好地理解这个函数，下面的示例展示了一个简单的代码片段：
<!DOCTYPE html>
<html>
<head>
<title>切换类名 onclick 反应 - Javascript</title>
<style>
.my-class {
color: red;
font-weight: bold;
}
.new-class {
color: green;
font-style: italic;
}
</style>
</head>
<body>
<div id="myElement" class="my-class">Hello World!</div>
<button onclick="toggleColor()">Toggle Color</button>
<script>
function toggleColor() {
document.getElementById("myElement").classList.toggle("new-class");
}
</script>
</body>
</html>
上述代码中，我们有一个div元素，它有一个初始的my-class类，这将使文本的颜色为红色，加粗。我们还定义了一个new-class类，并为文本定义了一个不同的样式（绿色，斜体）。
在按钮的onclick事件处理程序中，我们使用classList.toggle()函数来切换div元素的类名，从而切换文本的样式。
通过以上介绍，相信读者已经掌握了如何在点击事件中切换元素的类名。在实际开发中，这将是一项非常有用的技术。