如何在 JavaScript 中访问 CSS 变量？

在 JavaScript 中访问 CSS 变量

在 Web 开发中，CSS 变量提供了一种存储和重用样式的便捷方法。虽然可以直接在 CSS 中设置和修改这些变量，但您可能需要在 JavaScript 中访问它们的值。

从 JavaScript 访问 CSS 变量非常简单。操作方法如下：

第 1 步：获取计算样式

要获取元素的当前计算样式，请使用 getCompulatedStyle 函数。此函数接受一个元素作为参数，并将其计算样式作为 CSSStyleDeclaration 对象返回。

var style = getComputedStyle(element);

第 2 步：获取变量值

一旦你有了计算样式，您可以使用 CSSStyleDeclaration 对象的 getPropertyValue 方法访问任何 CSS 变量的值。 getPropertyValue 方法将变量的名称作为参数。

var variableValue = style.getPropertyValue('variable-name');

例如，要访问您提供的示例中的 CSS 变量 --color-font-general，您可以编写：

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

fontColor 变量现在将保存 CSS 变量的值，在本例中为 #336699。

以上是如何在 JavaScript 中访问 CSS 变量？的详细内容。更多信息请关注PHP中文网其他相关文章！