使用原生js來操作對象dom的class屬性

之前一直都使用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");
});