JavaScriptでcssを動的に書き換える方法(setProperty)

はじめに

JavaScriptでcssを書き換える方法があることを知り、驚いたので、その方法を備忘録として残しました。

サンプル

See the Pen Qiita anime1 by TakayukiTakase (@takayuki332) on CodePen.

サンプル説明

各色のボタンをクリックすると、JSのsetProperty関数を利用してCSSの--bg-colorプロパティの値を変更し、四角内の背景色を変更しています。
--bg-colorはカスタムプロパティのため、利用せずに直接background-colorを指定してもいいのですが、変数があることでどのような値を設定するかを自由に表現できることを狙ってカスタムプロパティを利用しました。

setPropertyの構文

setProperty(“設定項目” , “値” , “値２（省略可能）”)

設定項目はCSSのbackground-colorや、colorなどのプロパティを指定します。
値はその設定項目に対応した値をしています。

参考

https://developer.mozilla.org/ja/docs/Web/CSS/Using_CSS_custom_properties
https://wordpress.ideacompo.com/?p=5056