[解決済み] javascriptからCSS変数にアクセスする [重複]。

質問

javascriptからcssの変数にアクセスする方法はありますか？ここに私のcss変数の宣言があります。

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

どのように解決するのですか？

標準的な方法です。

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); }