CSSの変数の使い方【現役エンジニアが解説】
今回は、CSSの変数の使い方について、宣言と使用方法に分け、簡単に解説していきます。
変数の宣言
変数はプロパティとして名前の先頭に–を付け、値を指定します
変数をどこにでも使えるようにするには、:rootの擬似クラスを使用します。
:root{
--hoge-color-red:red;
}
上記のコードでは、全体で使える値がredの–hoge-color-redという変数を宣言しています。
変数の使用方法
宣言した変数は、プロパティの値の部分で指定し、使うことができます。
プロパティの値で変数を使う際には、var(変数名)と指定する必要があります。
.hoge{
color:var(--hoge-color-red);
}
上記のコードでは、hogeのクラスの要素のcolorプロパティに–hoge-color-redという変数の値を適用しています。
JavaScriptからのCSSの変数の使い方
JavaScriptからgetPropertyValueメソッドでCSSの変数の値を取得できます。
また、setPropertyメソッドを使うことで、CSSの変数に値を設定することもできます。
console.log(document.documentElement.style.getPropertyValue("--hoge-color-red")); // CSSの変数の値の取得
document.documentElement.style.setProperty("--hoge-color-red", "blue"); // CSSの変数の値の設定
上記のコードでは、HTML文書全体で使えるようになっているCSSの変数の値の取得と設定をそれぞれで行っています。