JavaScriptでスタイルを指定する

ITよろず

ここではJavaScriptでCSS要素のセレクタを記述してスタイルを指定する方法を紹介します。記述方法はいろいろあると思いますがシンプルな方法を記載したいと思います。
以下のHTMLの目的部分だけをスタイル指定する例です。

<div id="cel1">
  <div class="pic">SampleA</div>
  <div class="pic">SampleB</div>
</div>
<div id="cel2">
  <div class="pic">SampleC</div>　← ここのスタイルを変更
  <div class="pic">SampleD</div>
</div>

スタイル指定する部分を特定して、変更内容のCSS要素を記述します。

var i_cel2 = document.getElementById("cel2");
var c_pic = i_cel2.getElementsByClassName("pic");　← id="cel2"内のclass"pic"を特定（複数あり）
c_pic[0].style.fontSize = "20px";　← id="cel2"内の1つ目のclass"pic"のfont-sizeを指定

上記の例の場合はid=“cel2”の1つ目のclass=“pic”を特定してスタイルを指定します。スタイルを指定するCSSセレクタを記述するのですが、上記のfont-sizeのようなセレクタ名に”-“が付いているものは「fontSize」と”-“の次を大文字で単語を繋げるローワーキャメルケースで指定します。
ただJavaScriptで指定するときはCSSの擬似クラス(:activeなど)や疑似要素(:beforeなど)を含めることができません。

シェアする