---
tags: Javascript,
disqus: hackmd
---

# [JS]classList - 新增刪除class name

[HTML DOM classList Property](https://www.w3schools.com/jsref/prop_element_classlist.asp)
[ADD/REMOVE CLASSES WITH RAW JAVASCRIPT](https://jaketrent.com/post/addremove-classes-raw-javascript/)

---

過去習慣用JQuery的hasClass、addClass、removeClass的方法來對DOM的class name作處理。

換回原生JS後，可以使用setAttribute()、removeAttribute()，來做到，但都是指針對一個。

多個的時候就麻煩了，不過好在，還有一個更方便的方法[Element.classList](https://developer.mozilla.org/zh-TW/docs/Web/API/Element/classList)，用起來就像JQ的方法一樣。

但是！ IE不支援classList的方法。。。

不過網路大神就是猛，這三個方法就是瀏覽器有classList就用classList，沒有就用自己寫的。

function hasClass(el, className) {
    if (el.classList)
        return el.classList.contains(className);
    else
        return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}
      
function addClass(el, className) {
    if (el.classList)
        el.classList.add(className);
    else if (!hasClass(el, className)) {
        el.className += " " + className;
    }
}

function removeClass(el, className) {
    if (el.classList)
        el.classList.remove(className);
    else if (hasClass(el, className)) {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className=el.className.replace(reg, ' ');
    }
}

使用起來就是這麼的舒服。

var el = document.getElementById('peace')
addClass(el, 'be-still')
// or
removeClass(el, 'be-still')