複数の要素にstyleを設定したい
１．はじめに
JavaScriptで、HTMLをいじくりまわしていると、「class名が同じ要素すべてにstyleを設定したいな～」と思う時が訪れるでしょう。
でも、いちいち
<script>
function fontsize() {
document.getElementsByClassName("name1")[0].style.fontSize = "70px";
document.getElementsByClassName("name1")[1].style.fontSize = "70px";
document.getElementsByClassName("name1")[2].style.fontSize = "70px";//以下繰り返し
}
</script>
のように書いて、あとは[]の中を要素の数分だけ指定して繰り返していくなんてめんどくさすぎる！
そう考えていた、そこのあなた(私)にこの記事を捧げます。
２．解決案
結論から言うと
<script>
function fontsize() {
var className1 = document.getElementsByClassName("name1");
for (var i = 0; i < className1.length; i++) {
className1[i].style.fontSize = "70px";
}
}
</script>
というようにfor文を駆使して書くとうまくいきます。
これでname1と名付けられた要素たちのフォントサイズを、(要素の数がたくさんあっても)すべて70pxにする処理が可能です。
３．この記事を書こうと思った背景
JavaScriptの勉強を始めた際に、
document.getElementsByClassName("name1")[0].style.fontSize = "70px";
に関して愚かな私は
「いちいち[0]とか[1]で要素を指定せなあかんってなんやねん！
document.getElementsByClassName("name1").style.fontSize = "70px";
で全部の要素のサイズを変えれないとclassってつけた意味ないやん！」
と憤慨していましたが、調べていくうちに、これはclassに罪があるわけではないことを知りました。
"They is ~"という文章を間違えてますと指摘されて、「なんやねんtheyって役立たずやな」と逆切れしているのに近かったのです。おバカでした。
（上のたとえに倣うなら
document.getElementsByClassName("name1")[0].style.fontSize = "70px";
は"One of them is ~"みたいな感じですね）
４．おわりに
本当は、
document.getElementsByClassName("name1").style.fontSize = "70px";
のように一行でまとめることができればいいんですが、調べた限り同様の条件では、できないようです。
…ただ、jQueryというライブラリのcss()を使うとかなりシンプルに書くことができます。
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
function fontsize() {
$(".name1").css({'font-size':'70px'})
}
</script>
このように記述すると、前述のfor文で書いたコードと同じことができます。
というかこれが一番いいのかも？