☰

JavaScript から CSS 変数にアクセスする [重複] 質問する

tag-icon • tag-icon javascript css css-variables
JavaScript から CSS 変数にアクセスする [重複] 質問する

JavaScript から CSS 変数にアクセスする方法はありますか? ここに私の CSS 変数宣言を示します。

:root {
  --color-font-general: #336699;
}

ベストアンサー1

標準的な方法:

  1. 計算されたスタイルを取得するにはgetComputedStyle
  2. 使用getPropertyValue目的のプロパティの値を取得する
getComputedStyle(element).getPropertyValue('--color-font-general');

例：

var style = getComputedStyle(document.body)
console.log( style.getPropertyValue('--bar') ) // #336699
console.log( style.getPropertyValue('--baz') ) // calc(2px*2)
:root { --foo:#336699; --bar:var(--foo); --baz:calc(2px*2); }

おすすめ記事