如何 - 切换类
使用 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 属性的更多信息。