JS获取 CSS 中定义var变量值
目录
示例代码
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修改样式
我们可以通过使用 getComputedStyle 读取样式，通过 element.style 修改样式。