Vanila JS class add/remove

element.classList.add 를 사용 하여 클래스를 추가

ex)element.classList.add("my-class");

 

element.classList.remove 는 클래스를 제거

ex)element.classList.remove("my-class");

 

var m1 = document.getElementById('m1');

var add = document.getElementById('add');
var remove = document.getElementById('remove');

add.onclick = function(){
    m1.classList.add('list2');
}
remove.onclick = function(){
    m1.classList.remove('list2');
}

 

중복 클래스 조절

 

var list = document.querySelectorAll('.list1');

var add = document.getElementById('add');
var remove = document.getElementById('remove');

add.onclick = function(){
    for(var i=0; i<list.length; i++){
        list[i].classList.add('list2');
    }
}
remove.onclick = function(){
    for(var i=0; i<list.length; i++){
        list[i].classList.remove('list2');
    }
}