CSS で JavaScript を使用して変数を変更する

JavaScriptで変数を変更

CSS変数はDOMにアクセスできるため、それらをJavaScriptで変更できます。

この例では、上一ページで使用された例で --blue 変数を表示および変更するスクリプトを作成する方法を説明しています。この瞬間、JavaScriptに不慣れであれば、心配しないでください。JavaScriptに関する知識を学ぶためには、私たちのJavaScriptチュートリアルを参照してください：

例

<script>
// 根要素を取得
var r = document.querySelector(':root');
// 変数の値を取得する関数を作成
function myFunction_get() {
  // 根のスタイル（プロパティおよび値）を取得
  var rs = getComputedStyle(r);
  // --blue変数の値をアラート
  alert("--blueの値は: " + rs.getPropertyValue('--blue'));
}
// 変数値を設定する関数を作成します}}
function myFunction_set() {
  // 変数 --blue の値を別の値に設定します（この場合、"lightblue"）
  r.style.setProperty('--blue', 'lightblue');
}
</script>

自分で試してみる

ブラウザサポート

テーブルの数字には、その属性を完全にサポートする最初のブラウザバージョンが示されています。

関数
var() 49.0 15.0 31.0 9.1 36.0

CSS var() ファンクション

関数 説明
var() CSS 変数の値を挿入します。