• 元素的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);
    			}
    		}
    	}
    };
    
  • 相关阅读:
    python之递归函数
    python之内置函数
    python之迭代器与生成器
    python之装饰器函数
    python之函数进阶
    python之初识函数
    一起学Android之Dialog
    一起学Android之Menu
    一起学Android之GridView
    一起学Android之ViewPager
  • 原文地址:https://www.cnblogs.com/zjxwow/p/2866267.html
Copyright © 2020-2023  润新知