JS获取 CSS 中定义var变量值

目录

示例代码

CSS3 :root 选择器

CSSStyleDeclaration getPropertyValue() 方法

styleSheets

 cssRules

关键特性

使用示例

注意事项

典型应用场景

Window getComputedStyle() 方法

Window getComputedStyle() 方法和 style 的异同

---

在 JavaScript 中，可以通过 getComputedStyle() 方法结合 getPropertyValue() 来获取 CSS 中定义的变量值。以下是具体的实现方法：

示例代码

说明

1. :root 定义变量：CSS 变量通常在 :root 中定义，确保全局可用。
2. getComputedStyle()：用于获取指定元素的所有计算样式。
3. getPropertyValue()：从计算样式中提取指定的 CSS 变量值。
4. .trim()：去除可能存在的多余空格。

通过这种方式，你可以轻松获取并动态使用 CSS 变量的值！

CSS3 :root 选择器

:root选择器用匹配文档的根元素。

设置HTML文档的背景色：

 
 




菜鸟教程

在HTML中根元素始终是HTML元素。

CSSStyleDeclaration getPropertyValue() 方法

getPropertyValue() 方法返回指定的 CSS 属性的值。

object.getPropertyValue(propertyname)

参数	描述
propertyname	必需。一个字符串，表示要检测的属性名。

返回 color 属性的值:

getPropertyValue() 方法

点击按钮返回 color 属性值。

点我

一些文本。

styleSheets

• 定义：一个只读属性，返回文档中所有 外部和内联样式表 的集合（StyleSheetList 对象）。

• 包含内容：

  •  引入的外部 CSS 文件