必须用element.style.setproperty()设置css变量,参数为带--前缀的字符串名和字符串值;读取须用getcomputedstyle().getpropertyvalue(),返回字符串或空字符串,作用域和节点匹配是关键。

能,但必须用对方法、读对节点、传对格式——否则静默失败,连报错都没有。
getComputedStyle().getPropertyValue() 才是唯一靠谱的读取方式
element.style.getPropertyValue('--color') 永远拿不到 :root 里定义的值,它只查内联 style 属性;真正生效的是浏览器计算后的结果,得靠 getComputedStyle()。
- 读全局变量(比如主题色):用
getComputedStyle(document.documentElement).getPropertyValue('--theme') - 读某元素上实际生效的值(含继承/覆盖):用
getComputedStyle(el).getPropertyValue('--size') - 返回值永远是字符串,哪怕 CSS 里写的是
--gap: 2rem,拿到的也是"2rem",不是数字或单位分离对象 - 变量未生效时返回空字符串
"",不是undefined或null,别用== null判空,要用!val.trim()
element.style.setProperty() 是唯一合法的修改入口
别试 el.style.--color = 'red' 或 el.style.colorVar = 'red',这些语法根本不存在,也不会报错,只是彻底无效。
DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 必须调用
setProperty(),第一个参数是带双短横的完整名,如'--bg-color',漏掉--就白干 - 第二个参数必须是字符串,
el.style.setProperty('--opacity', 0.7)会失败,得写成'0.7' - 想改全站变量,目标必须是
document.documentElement;只改某个组件,就得找到那个组件的 DOM 节点再调用 - 修改后样式立即重绘,但不会触发 transition,除非变量本身参与了可动画属性(如
background-color)且浏览器原生支持
为什么 setProperty 在循环里频繁调用会导致卡顿
每次 setProperty() 都会触发样式重新计算(style recalc),如果在 scroll 或 resize 回调里无节制调用,浏览器来不及合并,就会明显抖动。
- 高频场景下,先缓存要改的键值对,用
Object.entries()批量遍历一次设置 - 避免在 for 循环中对同一元素反复设同一个变量,可用
Map记录element + varName是否已设置过 - 真需要强制刷新(比如旧版 Safari),用
el.offsetHeight触发同步 layout,但这是权宜之计,别滥用 - 注意 IE 完全不支持
setProperty和自定义属性,Node.js 环境(如 JSDOM)也可能返回空或抛错,得提前检测
引用其他 CSS 变量时不能直接传变量名字符串
想让 --current-font 指向 --onikipxfont 的值,不能写 setProperty('--current-font', 'onikipxfont')——这只会把字面量字符串 "onikipxfont" 当成值,CSS 解析不了。
- 正确做法是传
'var(--onikipxfont)',注意单引号里包的是完整var()函数调用 - 如果被引用的变量本身带单位或计算逻辑(如
--onikipxfont: calc(12px + 2px)),var()仍能正常解析 - 但 JS 无法预判这个引用是否最终有效——比如
--onikipxfont本身未定义,那--current-font就会回退到 fallback 或失效,得靠 CSS 层兜底
最麻烦的从来不是怎么读或怎么写,而是你改完之后,到底哪些元素会响应、哪些被局部 style="--x: y" 覆盖了、哪些又被 !important 锁死了——这些都得靠人工理清继承链,setProperty 自己可不管。
前端入门到VUE实战笔记:立即使用
在学习笔记中,你将探索 前端 的入门与实战技巧!










