应监听 input 事件而非 change 以实现实时响应颜色变化，通过 document.documentElement.style.setProperty() 写入 CSS 自定义属性，并添加值比对避免重复设置。
监听 input 事件而非 change
用户在原生 <input type="color"> 中拖拽或点击拾色时，change 只在失焦后触发，而 input 会实时响应每次颜色变化。不监听 input，同步就会有明显延迟。
- 用
addEventListener('input', handler)，别用onchange属性或change事件 - 确保 DOM 已加载完成再绑定，否则可能取不到元素
- 移动端 Safari 对
input事件支持良好，无需降级 fallback
写入 :root 需调用 document.documentElement.style.setProperty()
CSS 自定义属性（根变量）必须通过 JS 的 style.setProperty() 写入 document.documentElement（即 <html> 元素），直接改 document.body.style 或局部元素无效。
- 正确写法：
document.documentElement.style.setProperty('--primary-color', colorValue) - 变量名必须带两个连字符前缀，如
--accent，不能漏掉 - 值要传字符串，
input.value已是十六进制格式（如"#ff6b35"），可直接传入，无需额外转换
避免重复设置导致样式抖动
如果多个拾色器共用同一变量，或存在初始化逻辑，反复调用 setProperty() 可能触发多余重绘。尤其当变量值未真正改变时，没必要刷新。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
- 加一层简单比对：
if (colorValue !== currentColor) { setProperty(...); currentColor = colorValue; } - 不要在每次
input中读取getComputedStyle(document.documentElement).getPropertyValue('--x')做比较——开销大且可能因 CSS cascade 返回空字符串 - 用一个闭包变量或
data-属性缓存上一次写入值更轻量
兼容性与 fallback 注意点
所有现代浏览器（Chrome 49+、Firefox 31+、Safari 9.1+、Edge 16+）都支持 input[type=color] 和 setProperty() 操作 :root。但要注意：
立即学习“前端免费学习笔记（深入）”；
- IE 完全不支持，若需兼容，得用第三方拾色器 + 手动注入
style标签，不是本文范围 - CSS 变量本身不支持动画，所以直接赋值后颜色切换是瞬时的；如需淡入效果，得靠
transition: background-color .2s等作用于使用该变量的元素上，而非变量本身 - 某些 CMS 或构建工具（如 Next.js）可能剥离未使用的 CSS 变量，确保你在 CSS 中至少一处用了该变量，例如
body { background-color: var(--primary-color); }
最易被忽略的是：CSS 变量作用域是继承的，但 :root 是全局起点；如果你在 Shadow DOM 内操作，document.documentElement 依然有效，但组件内样式需显式继承或重定义变量。
