JavaScriptにおけるクラス属性の操作について
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Javascript Basic</title>
<style>
.box {
width: 100px;
height: 100px;
background:gray
}
.border-pink {
border-bottom:5px solid pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="js/main.js"></script>
</body>
</html>
上記において、'box'クラスにboreder-pink追加したい。
JavaScript側から操作する方法は
main.js
const div = document.querySelector('div');
div.className = 'boreder-pink';
としてしまいがちだが、これは間違い。
classNameだと最終的に形成されるクラス属性になるので、
これだと<div class="border-pink">だけになっていまう。
したがって
main.js
div.className = 'box boreder-pink';
とする。
ただこれだといちいち元のクラスを調べてこないといけないので、classListを使う。
main.js
div.classList.add('border-pink'); //追加
div.classList.remove('box'); //削除
div.classList.contains('box'); //あるか検索 true,falseで返す
とする。
ちなみにcontainsとifで、よく見かけるあったら削除、なかったら追加ができる。
main.js
if (div.classList.contains('border-pink')) {
div.classList.remove('border-pink');
} else {
div.classList.add('border-pink');
}
ただしこれは
main.js
div.classList.toggle('border-pink');
にまとめることができる。