[javascript] vanilla js 實作 addClass() 與 removeClass()

以前寫 javascript 要去改變 新增/刪除 元素的 Class 總是覺得 jquery 方便許多,今天想說來整理個純 javscript 實作 addClass() 和 removeClass()

目前處理元素的 Class,我們可以使用 classNameclassList(支援IE10以上及各瀏覽器,部分瀏覽器有些小限制)。

以下例子會使用到 querySelectorAll (IE8以上之瀏覽器支援)


首先看使用 className 的實作

function addClass(elements, classname) {
    // elements 為空字串或空陣列
    if (!elements) { return; }

    // 如果是字串則 querySelectorAll,只有一個元素則轉成陣列(方便處理)
    if (typeof(elements) === 'string') {
        elements = document.querySelectorAll(elements);
    }else if (elements.tagName) { elements = [elements]; }

    // 檢查陣列中元素的 className
    for (var i = 0; i < elements.length; i++) {
        // 將目前取得的 className 前後加上空白,方便統一做 indexOf。
        if ( (' ' + elements[i].className+' ').indexOf(' ' + classname + ' ') < 0 ) {
           elements[i].className += ' ' + classname;
        }
    }
}

addClass('body', 'test1');
addClass(document.body, 'test2');

console.log(document.body.className);    // 'test1 test2'

上面這段程式碼使用 className 實作出 selector addClass 的功能

 

function removeClass(elements, &amp;nbsp;classname) {
    // elements 為空字串或空陣列
    if (!elements) { return; }

    // 如果是字串則 querySelectorAll,只有一個元素則轉成陣列(方便處理)
    if (typeof(elements) === 'string') {
        elements = document.querySelectorAll(elements);
    }else if (elements.tagName) { elements = [elements]; }

    // 新增要尋找的 classanme RE
    var reg = new RegExp('(^| )' + classname + '($| )', 'g');

    // 利用 RE 去取代為空白
    for (var i=0; i < elements.length; i++) {
        elements[i].className = elements[i].className.replace(reg,' ');
    }
}


addClass('body', 'test1');
addClass(document.body, 'test2');
removeClass('body', test1);
console.log(document.body.className);    // 'test2'

上面這段程式碼則使用 className 實作出 selector removeClass 的功能

 

接下來我們換成使用 classList 實作 addClass() 與 removeClass()。(支援IE10 以上)

function addClass(elements, myClass) {
    // elements 為空字串或空陣列
    if (!elements) { return; }

    // 如果是字串則 querySelectorAll,只有一個元素則轉成陣列(方便處理)
    if (typeof(elements) === 'string') {
        elements = document.querySelectorAll(elements);
    }else if (elements.tagName) { elements = [elements]; }

    // add class
    for (var i = 0; i < elements.length; i++) {
        elements[i].classList.add(myClass);
    }
}
addClass('body', 'test1');
addClass(document.body, 'test2');

console.log(document.body.className);    // 'test1 test2'

上面這段程式碼使用 classList 實作出 addClass()

 

function removeClass(elements, myClass) {
    // elements 為空字串或空陣列
    if (!elements) { return; }

    // 如果是字串則 querySelectorAll,只有一個元素則轉成陣列(方便處理)
    if (typeof(elements) === 'string') {
        elements = document.querySelectorAll(elements);
    }else if (elements.tagName) { elements = [elements]; }&lt;/pre&gt;
&lt;pre&gt;    // remove class 
    for (var i=0; i < elements.length; i++) { 
        elements[i].classList.remove(myClass); 
    } 
} 

addClass('body', 'test1');
addClass(document.body, 'test2');
removeClass('body', test1);
console.log(document.body.className); // 'test2'

上面這段程式碼使用 classList 時作出 removeClass()

由上面可以看出 classList 的做法相對 className 簡單,但支援度需要從 IE10 開始,如果可以捨棄 IE10以下的話會好做很多XD

參考資料:

https://www.sitepoint.com/add-remove-css-class-vanilla-js/

http://caniuse.com/#search=classlist

Leave a Reply