当前位置：首页 > news >正文

JS获取 CSS 中定义var变量值

news 2025/7/20 15:19:31

示例代码

CSS3 :root 选择器

CSSStyleDeclaration getPropertyValue() 方法

styleSheets

cssRules

关键特性

使用示例

注意事项

典型应用场景

Window getComputedStyle() 方法

Window getComputedStyle() 方法和 style 的异同

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

示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>获取 CSS 变量</title><style>:root {--main-color: #3498db;}body {background-color: var(--main-color);}</style>
</head>
<body><script>// 获取根元素const root = document.documentElement;// 获取 CSS 变量值const mainColor = getComputedStyle(root).getPropertyValue('--main-color').trim();console.log('CSS变量 --main-color 的值是:', mainColor);</script>
</body>
</html>

说明

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

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

CSS3 :root 选择器

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

设置HTML文档的背景色：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style> 
:root
{background:#ff0000;
}
</style>
</head>
<body><h1>菜鸟教程</h1></body>
</html>

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

CSSStyleDeclaration getPropertyValue() 方法

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

object.getPropertyValue(propertyname)

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

返回 color 属性的值:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
#ex1 {color: red !important;
}
</style>
</head>
<body>
<h1>getPropertyValue() 方法</h1><p>点击按钮返回 color 属性值。</p><button onclick="myFunction()">点我</button><div id="ex1">一些文本。</div><script>
function myFunction() {var declaration = document.styleSheets[0].cssRules[0].style;var propvalue = declaration.getPropertyValue("color");alert(propvalue);
}
</script></body>
</html>

`styleSheets`

定义：一个只读属性，返回文档中所有 外部和内联样式表 的集合（StyleSheetList 对象）。
包含内容：
- <link rel="stylesheet"> 引入的外部 CSS 文件
- <style> 标签定义的内部 CSS
- 通过 @import 导入的样式表

属性示例：

// 获取文档中第一个样式表
const firstStyleSheet = document.styleSheets[0];

`cssRules`

定义：CSSStyleSheet 对象的属性，返回样式表中所有 CSS 规则 的集合（CSSRuleList 对象）。

包含内容：

普通规则（如 div { color: red; }）
@ 规则（如 @media, @keyframes, @font-face）

访问规则：

// 获取第一个样式表中的所有 CSS 规则
const rules = document.styleSheets[0].cssRules;

关键特性

属性/方法	说明
`styleSheets.length`	文档中样式表的数量
`cssRules.length`	单个样式表中 CSS 规则的数量
`cssRules[index]`	获取具体规则（返回 `CSSStyleRule` 对象）
`rule.style`	访问规则的样式属性（如 `cssRules[0].style.color = "blue"`）
`insertRule()`	向样式表插入新规则（需指定索引）
`deleteRule()`	删除样式表中的规则

使用示例

// 获取第一个样式表
const styleSheet = document.styleSheets[0];// 遍历所有 CSS 规则
for (let rule of styleSheet.cssRules) {if (rule instanceof CSSStyleRule) { // 过滤普通样式规则console.log("选择器:", rule.selectorText);console.log("样式:", rule.style.cssText);}
}// 修改第一条规则的背景色
styleSheet.cssRules[0].style.backgroundColor = "yellow";// 添加新规则
styleSheet.insertRule("body { font-size: 20px; }", 0);// 删除第一条规则
styleSheet.deleteRule(0);

注意事项

同源策略限制：
跨域样式表（如 CDN 引入的 CSS）的 cssRules 可能为 null（需 CORS 支持）。
@import 规则：
导入的样式表会作为独立条目出现在 styleSheets 中。
动态修改：
通过 cssRules 修改的样式会 实时生效，但不会影响原始 CSS 文件。
规则类型判断：
使用 instanceof 区分规则类型（如 CSSMediaRule、CSSKeyframesRule）。

典型应用场景

动态分析/修改页面样式
实现 CSS 调试工具
按条件启用/禁用特定样式规则
程序化生成动画（操作 @keyframes）

通过 document.styleSheets 和 cssRules，开发者能以编程方式深度操作 CSS，实现灵活的样式控制。

Window getComputedStyle() 方法

getComputedStyle() 方法用于获取指定元素的 CSS 样式。

获取的样式是元素在浏览器中最终渲染效果的样式。

window.getComputedStyle(element, pseudoElement)

参数说明：

element: 必需，要获取样式的元素。
pseudoElement: 可选，伪类元素，当不查询伪类元素的时候可以忽略或者传入 null。

返回值

返回的对象是 CSSStyleDeclaration 类型的对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p>点击按钮计算 DIV 的背景颜色。</p>
<p><button onclick="myFunction()">点我</button></p>
<div id="test" style="height: 50px;background-color: rgb(178, 116, 230);">测试 DIV</div>
<p>计算值为: <span id="demo"></span></p><script>
function myFunction(){var elem = document.getElementById("test");var theCSSprop = window.getComputedStyle(elem, null).getPropertyValue("background-color");document.getElementById("demo").innerHTML = theCSSprop;
}
</script></body>
</html>

Window getComputedStyle() 方法和 style 的异同

getComputedStyle 和 element.style 的相同点就是二者返回的都是 CSSStyleDeclaration 对象，取相应属性值得时候都是采用的 CSS 驼峰式写法，均需要注意 float 属性。

而不同点就是：

element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getComputedStyle 仅支持读并不支持写入。我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式