JavaScriptからCSS変数にアクセスする

Question

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

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

Answer 1

ちょうど標準的な方法：

1. getComputedStyle で計算されたスタイルを取得します
2. getPropertyValue を使用して、目的のプロパティの値を取得します

getComputedStyle(element).getPropertyValue('--color-font-general');

例：

var style = getComputedStyle(document.body);
console.log(style.getPropertyValue('--color-font-general'));

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

Answer 2

これを使って：

window.getComputedStyle(document.documentElement).getPropertyValue('--color-font-general');

そして、次のように変更できます。

document.documentElement.style.setProperty('--color-font-general', '#000');

ソース