如何使用 JavaScript 访问 CSS 变量？

在 JavaScript 中访问 CSS 变量

CSS 变量是在 CSS 文件中存储样式信息的强大工具。可以从 JavaScript 访问它们，使您能够动态更新 Web 应用程序的外观。

要从 JavaScript 访问 CSS 变量，您可以使用 getCompulatedStyle() 方法来检索 CSS 的计算样式。元素，然后使用 getPropertyValue() 方法获取所需属性的值。

例如，如果您有以下 CSS 变量声明：

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

您可以使用以下代码在 JavaScript 中访问此变量的值：

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

这将返回 --color-font-general CSS 的值变量作为字符串。然后，您可以使用此值动态调整 Web 应用程序的外观，例如通过设置文本元素的颜色。

这里是如何使用此技术更改所有文本元素的颜色的示例在文档中：

var elements = document.getElementsByTagName('p');
for (var i = 0, element; element = elements[i++];) {
  element.style.color = getComputedStyle(element).getPropertyValue('--color-font-general');
}

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