BUNCHO METHOD コードを楽しむプログラミング情報メディア

JavaScriptでCSSを書き換える

JavaScriptでCSSを書き換える。一例として文字サイズを変化させるサンプルを作ってみました。HTML要素のスライダーの使い方もあわせてチェックしてみてください。

JavaScriptでCSSを書き換えるサンプルコード

See the Pen slider(文字サイズ) by programmingbird (@programmingbird) on CodePen.

JavaScriptでCSSを書き換えるポイント

△.style.プロパティ = “◯”;

△に対象となるHTML要素、◯に指定する値を入れます。
注意するポイントはプロパティの部分。例えば文字サイズはCSSではfont-sizeというように2つの単語をハイフンでつないで(ケバブケースという)書きますが、JavaScript上で書く場合はfontSizeのようにハイフン無しで2つめ以降の単語の頭文字だけ大文字にするローワーキャメルケースという命名規則を使って書きます。

◯の部分は「10px」のように具体的な値を指定する場合はダブルクオーテーションで囲んで書きます。変数を使う場合はダブルクオーテーションはつけませんが、通常変数には数値だけが入っていて、単位はついていないので、サンプルコードのe.target.value + "px"の部分のように変数とダブルクオーテーションで囲んだ単位を+で結合して書いたりします。