元素的classList属性怎么用

查看HTML元素的classList元素将返回类型为DOMTokenList的对象，所以我们要研究的是该对象的属性和方法。

该类型的对象描述了一个用空格分隔的字符串数组，数组的每一项代表该元素的一个类名。HTMLElement.classList, HTMLLinkElement.relList, HTMLAnchorElement.relList or HTMLAreaElement.relList等方法都会返回该对象。

属性：

• length -- 只读属性，对于classList，它指示有多少个类名

方法：

• item(idx) -- 返回指定位置的项。如果未找到，则返回undefined，某些版本的浏览器返回null；
• contains(token) -- 如果数组中包含指定的元素，返回true，否则返回false；对于classList，该方法相当于jQuery中的hasClass方法；
• add(token) -- 向数组中添加元素。对于classList该方法相当于jQuery中的addClass
• remove(token) -- 移除指定的元素。对于classList该方法相当于jQuery中的removeClass方法；
• toggle(token) -- 切换某个元素。对于classList该方法相当于jQuery中的toggleClass方法；

简单的案例

var elemClassList = document.querySelector('#Bubby').classList,
    classNum = elemClassList.length;
elemClassList.add('sexy');
elemClassList.remove('sexy');
elemClassList.toggle('fat');
if( elemClassList.contains('nipple') ){
    console.info('OH YEAH');
}

模拟一下jQuery的addClass和removeClass

var Sys = {
	addClass: function (elem, value) {
		// 如果没有传递元素
		if (!elem) return;
		var arr = [];
		// 如果只有一个元素
		if (elem.nodeType) arr.push(elem);
		// 如果传递了HTML元素集合，如NodeList或HTMLCollection
		if (elem.length) {
			for (var j = 0, ln = elem.length; j < ln; j++) {
				// 只处理HTML标签元素
				if (elem[j].nodeType) arr.push(elem[j]);
			}
		}
		// 为每一个元素添加类名
		for (var i = 0, len = arr.length; i < len; i++) {
			var elem = arr[i];
			if (elem.nodeType === 1 && elem.className.indexOf(value) < 0 ) {
				elem.classList.add(value);
			}
		}
	},
	removeClass: function (elem, value) {
		var arr = [];
		if (!elem) return;
		// 如果只传递一个HTML元素
		if (elem.nodeType) arr.push(elem);
		// 如果传递了HTML元素集合
		if (elem.length) {
			for (var j = 0, ln = elem.length; j < ln; j++) {
				// 只处理HTML标签元素
				if (elem[j].nodeType) arr.push(elem[j]);
			}
		}
		for (var z = 0, len = arr.length; z < len; z++) {
			var elem = arr[z];
			if (elem.nodeType === 1 && elem.className.indexOf() >= 0) {
				elem.classList.remove(value);
			}
		}
	}
};

 

转载于:https://www.cnblogs.com/zjxwow/archive/2013/01/18/2866267.html