使用jQuery可以给元素很方便的添加class和删除class等操作,现在原生的JavaScript也可以实现这个方法了。使用classList可以方便的添加class、删除class、查询class等。

语法:

let elementClass = element.classList;

elementClasses 是一个 DOMTokenList 表示 element 的类属性 。如果类属性未设置或为空,那么 elementClasses.length 返回 0。element.classList 本身是只读的,虽然你可以使用 add() 和 remove() 方法修改它。

方法:

add( String [, String] )

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

remove( String [,String] )

删除指定的类值。

item ( Number )

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

toggle ( String [, force] )

当只有一个参数时:切换 class value; 即如果类存在,则删除它并返回false,如果不存在,则添加它并返回true。
当存在第二个参数时:如果第二个参数的计算结果为true,则添加指定的类值,如果计算结果为false,则删除它

contains( String )

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

示例:

// div是具有class =“foo bar”的<div>元素的对象引用
div.classList.remove("foo");
div.classList.add("anotherclass");

// 如果visible被设置则删除它,否则添加它
div.classList.toggle("visible");

// 添加/删除 visible,取决于测试条件,i小于10
div.classList.toggle("visible", i < 10);

alert(div.classList.contains("foo"));

//添加或删除多个类
div.classList.add("foo","bar");
div.classList.remove("foo", "bar");

兼容性:

不兼容Android2.3和iOS4.2的,在移动端上想使用也是有点头疼啊。IE系列的更别说IE9和IE8了。所以目前来看,还是无法在实际中放心的使用,只能用于某些特定的项目等。不过我们可以通过一些shim来实现,或者最下方给出的原生javascript实现。

跨浏览器javascript shim

https://github.com/eligrey/cl...

原生JavaScript

类似于jQuery库的使用方式,使用className通过正则来添加或者删除class。
addClass、removeClass、toggleClass、hasClass

function hasClass(obj, cls) { 
 return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); 
} 
 
function addClass(obj, cls) { 
 if (!this.hasClass(obj, cls)) obj.className += " " + cls; 
} 
 
function removeClass(obj, cls) { 
 if (hasClass(obj, cls)) { 
 var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); 
 obj.className = obj.className.replace(reg, ' '); 
 } 
} 
 
function toggleClass(obj,cls){ 
 if(hasClass(obj,cls)){ 
 removeClass(obj, cls); 
 }else{ 
 addClass(obj, cls); 
 } 
}

参考链接:
https://blog.csdn.net/leadn/a...


sourcenode
307 声望29 粉丝

以少聚多,持之以恒!


« 上一篇
webpack4初学习
下一篇 »
Vue基本原理