如何创建 - 切换类
使用 JavaScript 在元素中添加和删除类名之间切换。
点击按钮切换类名！
切换类
步骤 1) 添加 HTML:
在将类名添加到 id="myDIV" 的 div 元素之间切换（在本例中，我们使用一个按钮来切换类名）。
实例
<button onclick="myFunction()">Try it</button>
<div id="myDIV">
This is a DIV element.
</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");
}
亲自试一试 »
跨浏览器解决方案
注释: Internet Explorer 9 不支持 classList 属性。以下示例使用 IE9 的跨浏览器解决方案/回退代码:
实例
var element = document.getElementById("myDIV");
if (element.classList) {
element.classList.toggle("mystyle");
} else {
// For IE9
var classes = element.className.split(" ");
var i =
classes.indexOf("mystyle");
if (i >= 0)
classes.splice(i, 1);
else
classes.push("mystyle");
element.className = classes.join(" ");
}
亲自试一试 »
提示:另请参阅如何添加类。
提示:另请参阅如何删除类。
提示:在我们的 JavaScript 参考中详细了解 classList 属性。
