使用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);
}
}