トグルでclassを追加・除去するJavaScript

Posted on by IKIX_wbdv

　トグルでクラス名を追加削除したい時は多いですが不便でした．JavaScriptに「classList」が追加されました．classListには.add()，.remove()，.toggle()というメソッドがあります．以下.toggle()を使ったサンプルです．

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script>
    let test = {
	func: function() {
	let ele = document.getElementById("div");
　//ここで使っています．
	ele.classList.toggle(this.color);
    },
    color : 'blue',
};
</script>
<style>
    #div {
	width: 100px;
	height: 100px;
    }
    .red {
	background: red;
    }
    .blue {
	background: blue;
    }
</style>
</head>
<body>
<div id="div" class="red"></div>
<button onclick="test.func()">Toggle Color</button>
</body>
</html>