JavaScriptからCSS変数にアクセスする方法はありますか?ここで私のCSS変数宣言。
:root{
--color-font-general:#336699;
}
ちょうど標準的な方法:
getComputedStyle
で計算されたスタイルを取得しますgetPropertyValue
を使用して、目的のプロパティの値を取得しますgetComputedStyle(element).getPropertyValue('--color-font-general');
例:
var style = getComputedStyle(document.body);
console.log(style.getPropertyValue('--color-font-general'));
:root { --color-font-general: #336699; }
これを使って:
window.getComputedStyle(document.documentElement).getPropertyValue('--color-font-general');
そして、次のように変更できます。
document.documentElement.style.setProperty('--color-font-general', '#000');