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

source