JavaScriptでスタイルを指定する

動的にスタイルを変更したいページを作成する時などはJavaScriptで指定した部分のスタイルを変更するのが便利です。

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

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

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