如何使用JavaScript动态调整CSS变量值？
- 内容介绍
- 文章标签
- 相关推荐
本文共计835个文字，预计阅读时间需要4分钟。
直接改写伪原创以下开头内容，内容本身不变，不试图图解答案，不啰嗦，不超过100字，直接输出结果：
实操建议：
- 用
document.documentElement.style.setProperty('--color-primary', '#3b82f6')，这是标准写法，所有现代浏览器都支持 - 如果变量值含单位（比如
px、rem），必须连单位一起传进去，setProperty('--size', '1.25')是错的，得写成'1.25rem' - 想批量设多个变量？别链式调用
setProperty，先缓存document.documentElement.style，再挨个设，减少 DOM 访问开销
修改内联 style 标签里的 CSS 变量行不行
可以，但不推荐。手动拼接字符串往 <style id="dynamic-vars"> 里写 :root { --x: y }，看着灵活，实际坑多。
本文共计835个文字，预计阅读时间需要4分钟。
直接改写伪原创以下开头内容，内容本身不变，不试图图解答案，不啰嗦，不超过100字，直接输出结果：
实操建议：
- 用
document.documentElement.style.setProperty('--color-primary', '#3b82f6')，这是标准写法，所有现代浏览器都支持 - 如果变量值含单位（比如
px、rem），必须连单位一起传进去，setProperty('--size', '1.25')是错的，得写成'1.25rem' - 想批量设多个变量？别链式调用
setProperty，先缓存document.documentElement.style，再挨个设，减少 DOM 访问开销
修改内联 style 标签里的 CSS 变量行不行
可以，但不推荐。手动拼接字符串往 <style id="dynamic-vars"> 里写 :root { --x: y }，看着灵活，实际坑多。