DIV CSS 佈局教程網

之前一直都使用jquery來操作dom，今天想自己用原生寫一些插件，卻發現給dom增刪class的時候，使用slice來截取className特別的麻煩，後來發現，原來原生JS本來就有提供api來對dom的class進行增刪，下面的對象就是用來對dom進行增刪class的。

Element.classList

點擊查看classlist的api

html:

<div class="container">
    
</div>
<button class="change">
    切換
</button>

css:

.container{
    width:100px;
    height:100px;
    border:5px solid darkgrey;
    background:red;
    display:inline-block;
}
.blue{
    background-color:blue;
}

js:

var btn = document.querySelectorAll(".change")[0];
var container = document.querySelectorAll(".container")[0];
btn.addEventListener('click',function(){
    container.classList.toggle("blue");
});