JavaScriptとCSSで同じ変数を使用する

アニメーションの時間など、同じ値をJavaScriptとCSSで扱いたいことがあります。
それぞれで変数で管理するでも問題はないのですが、後々に変更が入った際に複数ファイルを変更することになってしまうので、どちらかでまとめて管理する方法を試してみます。

サンプルコード

まずはCSSで設定した変数(カスタムプロパティ)をJavaScriptでも使用する形を試してみます。

<div class="css-box">CSS</div>
<div class="js-box">JS</div>

.css-boxはCSSから、.js-boxはJavaScriptからスタイルの設定を行う想定です。

次にCSSですが、カスタムプロパティで色の定義をした上で、その値を使って.css-boxの背景色を設定します。

:root {
    --main-color: red;
}
.css-box {
	background-color: var(--main-color);
}

この時点では.css-boxのみに背景色が設定されている状態です。

最後に、カスタムプロパティで設定した値をJavaScriptで使用してみます。

// --main-color の値を取得
const root = document.querySelector(':root');
const mainColor = getComputedStyle(root).getPropertyValue('--main-color');

// .js-box の背景に適用
document.querySelector('.js-box').style.background = mainColor;

これでカスタムプロパティの値を参照して、CSSとJavaScriptの設定が行えました。
カスタムプロパティの値を参照するデモページ

次にJavaScriptで設定した変数をCSSで使用する形を試してみます。
先ほどのCSSから色の定義部分を削除します。

.css-box {
	background-color: var(--main-color);
}

これで.css-boxの参照元のカスタムプロパティがないので、背景色は設定されていない状態になります。

JavaScriptで変数に色を定義して、その変数を使って.js-boxへの背景の設定と、カスタムプロパティへの定義を行います。

const mainColor = 'blue';

// .js-box の背景に適用
document.querySelector('.js-box').style.background = mainColor;

// --main-color に色を定義
const root = document.querySelector(':root');
root.style.setProperty("--main-color", mainColor);

これでJavaScript側の変数を元にカスタムプロパティの定義ができたので、JavaScript側の変更のみでJavaScriptとCSSの両方を更新できます。
JavaScriptの値を参照するデモページ