toggle(
class,
true|false)
在元素中切换类名。
第一个参数为要在元素中移除的类名，并返回 false。
如果该类名不存在则会在元素中添加类名，并返回 true。
第二个是可选参数，是个布尔值用于设置元素是否强制添加或移除类，不管该类名是否存在。例如：
移除一个 class:
element
.classList.toggle("classToRemove", false);
添加一个 class:
element
.classList.toggle("classToAdd",
true);
注意：
Internet Explorer 或 Opera 12 及其更早版本不支持第二个参数。
document.getElementById(
"myDIV"
).classList.add(
"mystyle"
,
"anotherClass"
,
"thirdClass"
);
尝试一下 »
document.getElementById(
"myDIV"
).classList.remove(
"mystyle"
,
"anotherClass"
,
"thirdClass"
);
尝试一下 »
<div id=
"myDIV"
class=
"mystyle
anotherClass thirdClass"
>I am a DIV element</div>
var
x = document.getElementById(
"myDIV"
).classList;
x
输出结果为:
mystyle
anotherClass thirdClass
尝试一下 »
查看元素是否存在 "mystyle" 类:
var
x = document.getElementById(
"myDIV"
).classList.contains(
"mystyle"
);
x
输出结果为:
尝试一下 »
var
x = document.getElementById(
"myDIV"
);
if
(x.classList.contains(
"mystyle"
)) {
x.classList.remove(
"anotherClass"
);
}
else
{
alert(
"Could not find it."
);
}
尝试一下 »
CSS 教程:
CSS 选择器
CSS 参考手册:
CSS
.class
选择器
HTML DOM 参考手册:
HTML DOM className 属性
HTML DOM 参考手册:
HTML DOM getElementsByClassName() 方法
HTML DOM 参考手册:
HTML DOM Style 对象
