element.classList有哪些方法?如何判断一个元素的 class 列表中是包含某个 class?如何添加一个class?如何删除一个class?
Element.classList 是一个只读属性,返回一个元素的类属性的实时集合。
var div = document.getElementById("myDiv");
console.log(div.classList);
具有方法:
add( String [, String] )
添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。
var div = document.getElementById("myDiv");
div.classList.add("class2");
console.log(div.classList);
remove( String [,String] )
删除指定的类值。
div.classList.remove("class");
item ( Number )
按集合中的索引返回类值。
var div = document.getElementById("myDiv");
console.log(div.classList.item(0)); // class1
console.log(div.classList.item(1)); // class2
console.log(div.classList.item(2)); // class3
toggle ( String [, force] )
当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。
当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它
存在一个参数时:
[图片上传中...(QQ截图20180323213957.jpg-59005a-1521812402000-0)]
var div = document.getElementById("myDiv");
div.classList.toggle("class2"); // 由于不存在class2,所以会添加class2
div.classList.toggle("class1"); // 存在class1,删除class1
console.log(div.classList); // class2
存在两个个参数时:
第二个参数为一个表达式,对表达式最终运算结果为true,则添加class,否则删除。
可以预见的是,这个表达式会隐式调用Boolean()方法实现转化。
var div = document.getElementById("myDiv");
div.classList.toggle("class2","1");
console.log(div.classList); // "1"会隐式转换为布尔类型true,最终添加class2属性。
var condition = "class1" && "class2";
var test = "class1 class2";
var div = document.getElementById("myDiv");
div.classList.toggle("class3",condition);
console.log(div.classList); // 如果同时存在类class1和class2,则添加类class3
contains( String )
检查元素的类属性中是否存在指定的类值。
var div = document.getElementById("myDiv");
console.log(div.classList.contains("class1")); // true
console.log(div.classList.contains("class1 class2")); // false 不支持多类判定