如何 - 切换类
使用 JavaScript 在元素上添加和移除类名之间进行切换。
点击按钮切换类名!
切换类
步骤 1) 添加 HTML
在 id="myDIV" 的 div 元素上添加类名之间进行切换(此示例中使用按钮切换类名)。
示例
<button onclick="myFunction()">试一试</button>
<div id="myDIV">
这是一个 DIV 元素。
</div>
步骤 2) 添加 CSS
添加一个要切换的类名
示例
.mystyle {
width: 100%;
padding: 25px;
background-color: coral;
color: white;
font-size: 25px;
}
步骤 3) 添加 JavaScript
获取 id="myDIV" 的 <div> 元素,并在 "mystyle" 类之间进行切换
示例
function myFunction() {
var element = document.getElementById("myDIV");
element.classList.toggle("mystyle");
}
自己动手试一试 »
提示:另请参阅 如何添加类。
提示:另请参阅 如何移除类。
提示:在我们的 JavaScript 参考中了解有关 classList 属性的更多信息。