深入了解Element​.class​List

2019-04-23148次阅读DOM

平时使用时就是classList.add、classList.remove等方法。但还真不知道classList是一个数组,其次就是add、remove、toggle等可以有多个参数。这篇算是深入了解一下Element.classList并加深理解。

Element.classList是一个只读属性,返回一个元素的类属性的实时DOMTokenList集合。使用classList是替代element.className作为空格分隔的字符串访问元素的类列表的一种方便的方法。虽然element.classList本身是只读的,但是你可以使用 add() 和 remove()方法修改它。

方法

add( String [, String] )

添加指定的类值。如果这些类已经存在于元素的属性中,那么它们将被忽略。

remove( String [,String] )

删除指定的类值。

item ( Number )

按集合中的索引返回类值。

toggle ( String [, force] )

当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。

当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它

contains( String )

检查元素的类属性中是否存在指定的类值。

replace( oldClass, newClass )

用一个新类替换已有类。

 

示例
 

const div = document.createElement('div');
div.className = 'foo';

//起始状态: <div class="foo"></div>
console.log(div.outerHTML);

// 使用 classList API 移除、添加类名
div.classList.remove("foo");
div.classList.add("anotherclass");

// <div class="anotherclass"></div>
console.log(div.outerHTML);

// 如果设置了visible,则将其移除,否则将其添加
div.classList.toggle("visible");

// 添加/移除visible类名, 是根据测试条件,i小于10
div.classList.toggle("visible", i < 10 );

console.log(div.classList.contains("foo"));

// 添加/移除多个类名
div.classList.add("foo", "bar", "baz");
div.classList.remove("foo", "bar", "baz");

//添加/移除多个类名时使用展开语法(Spread syntax)
const cls = ["foo", "bar"];
div.classList.add(...cls); 
div.classList.remove(...cls);

//替换foo类名为bar类名
div.classList.replace("foo", "bar");

//假设div上有类名为foot、bar。
div.classList.item(0);//返回foot
div.classList.item(1);//返回bar
div.classList.item(2);//索引超出范围返回null
div.classList.item("xinran001.com");//不存在的字符串索引则返回第一个索引foot

 

上一篇: JavaScript设计模式之单例模式  下一篇: 认识一下swig前端模板引擎  

深入了解Element​.class​List相关文章