从javascript访问CSS变量

Question

有没有办法从javascript访问css变量？这是我的css变量声明.

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

Answer 1

只是标准方式:

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

例:

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

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

有没有一种方法可以在不导致回流的情况下执行此操作，因为 getComputedStyle 会执行此操作？ (3认同)
@webkitfanz您确实意识到IE中不支持CSS变量，对吗？ (2认同)
请注意，返回的值有前导空格，因此您将得到“#336699”而不是“#336699”。如果您尝试检查该值，这一点很重要（由于前导空格，它可能不匹配，因此请考虑在检查之前修剪它）。 (2认同)

Answer 2

用这个:

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

你可以像这样改变它:

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

@Rudie `element.style.getPropertyValue()` 仅当变量已设置在元素的内联样式上（而不是通过 CSS 规则）时才起作用 (5认同)
您也可以像这样获得它：`element.style.getPropertyValue（）` (3认同)
它实际上是`document.documentElement.style.setProperty(' - color-font-general','#000');`如果你想改变它. (2认同)