IT

【javascript】idではなくclassに対してスタイルを変更する方法

複数タグのスタイルをまとめて変更するには?

javascriptの勉強中ですが、問題が解決したのでアウトプットしてみます。(こちらの記事のおかげです、感謝!)

さて、javascriptでは、DOMを用いて、idのついたタグについて様々なスタイルに変更を加えることができます。しかし、同じidは1ページ中に一度しか使えず、複数のタグについてまとめて要素を変更したい場合、getElementByIdではうまく結果が出力されません。

 

例えば、上のコードだと出力結果は以下のようになります。

このように、getElementByIdを使うと、最初の<p>タグにのみ命令が出力されます。そこでコードを以下のように書き換えます。

 

出力結果はこうなります。全てのタグについて色が変わっています。

 

前述のコードとの大きな変更点としては、タグに対してidではなく、classを用いているということです。また、それに合わせて、(classをキーに要素を取得しているため)getElementByIdに代わってgetElementsByClassNameを用いてコードを記述しています。

 

for構文の意味

for 以下の部分ですが、lengthは「リストに含まれる要素数」を意味し、「i が0番目から要素の数になるまで」繰り返し処理を行います。「listのi番目の要素に対して、文字色を赤に変えろ」と記述しています。

 

 

 

ABOUT ME
てりたま
いつの間にかライターで生きるようになっていた人。真面目半分、不真面目半分で記事を書いてます。