从javascript访问CSS变量[重复]

Posted 2023-02-23

【中文标题】从javascript访问CSS变量[重复]

【英文标题】：Access CSS variable from javascript [duplicate]

【发布时间】：2017-06-03 04:53:25

【问题描述】：

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

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

【问题讨论】：

我真的很好奇为什么你不想在更有效的javascript中重新声明那个变量

@Dummy 那么会有两个地方需要维护值，使代码更加脆弱（即不是 DRY 方法）。

就我而言，我不知道它使用的是哪个 CSS 文件。用户决定文件，每个文件对这个变量都有不同的值。

此外，如果您的 CSS 变量具有不同的值，具体取决于哪个活动的@media 查询定义它们，您可以节省更多的工作和重复代码。

【参考方案1】：

只是标准方式：

使用getComputedStyle 获取计算样式 使用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); 

【讨论】：

看起来它在 IE 10 中不起作用，是否有正确方向的指针？

@webkitfanz 你确实意识到 IE 不支持 css 变量，对吧？

有没有办法做到这一点而不会导致回流，因为 getComputedStyle 会这样做？

请注意，返回的值有前导空格，因此您将得到“#336699”而不是“#336699”。如果您尝试检查该值，这很重要（由于前导空格它可能不匹配，因此请考虑在检查之前对其进行修剪）。

@EricMutta 我刚刚经历过。很烦人。为什么他们会在字符串中返回一个前导空格？

【参考方案2】：

使用这个：

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

你可以这样改变它：

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

source

【讨论】：

如果你想改变它，它实际上是document.documentElement.style.setProperty('--color-font-general', '#000');。

哎呀修复了。谢谢！

你也可以这样获取：element.style.getPropertyValue()

@Rudie element.style.getPropertyValue() 只有在元素的内联样式上设置了变量（而不是通过 CSS 规则）时才会起作用