classList介紹和原生JavaScript實現addClass、removeClass等

使用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...