document.getElementsByClassName(“class”)

クラスから要素を取得する

<p class="message">Hello world!!</p>
<p class="message">Hello world!!</p>

<script>
let messages = document.getElementsByClassName("message");
messages[0].style.backgroundColor = "#000000";
messages[0].style.color = "#FFFFFF";
messages[1].style.backgroundColor = "#000000";
messages[1].style.color = "#FFFFFF";
</script>

↓実行すると

Hello world!!

Hello world!!

同じクラスの要素を配列のように扱います。
繰り返しならfor文を使う方が良いかも↓

<p class="message">Hello world!!</p>
<p class="message">Hello world!!</p>

<script>
let messages = document.getElementsByClassName("message");
for (let i = 0; i < messages.length; i++) {
messages[i].style.backgroundColor = "#000000";
messages[i].style.color = "#FFFFFF";
}
</script>

コメント