1. 程式人生 > >原生javascript實現addClass和removeClass

原生javascript實現addClass和removeClass

addClass()和removeClass()是jQuery提供的功能。
用法:
$(selector).addClass(classname);$(selector).removeClass(classname);

在大多數情況下,使用jquery的選擇器選擇的元素是可以使用這兩個方法來追加和刪除class屬性的,但是有一些特殊情況,不是通過$()選擇器及jQuery其他方法(比如parent(), children()[0]等)拿到的元素,是沒法使用這兩個方法的。
比如下面這種情況:

var cArray = $("input[type='checkbox']");
for (var
i=0; i < cArray.length; i++) { var element = cArray[i].parentElement; element.addClass('uncheck_1'); //element.className += 'uncheck_1'; }

在這段程式碼裡面,element是通過parentElement拿到的,所以在執行element.addClass('uncheck_1');的時候,會報錯,提示addClass is not a function()錯誤。
這個時候,就需要使用原生的javascript方法來新增class了。

下面是通過原生的javascript實現了三個方法,可以解決上述問題。

function hasClass(element,cName){        //檢查class是否存在
    return !!element.className.match(new RegExp('(\\s|^)'+cName+'(\\s|$)'));
}
function addClass(element,cName){        //新增一個class
    if(!hasClass(element,cName)){
        element.className +=' '+cName;
    }
}
function
removeClass(element,cName){
//移除一個class if(hasClass(element,cName)){ element.className = element.className.replace(new RegExp('(\\s|^)'+cName+'(\\s|$)'),' '); } }