应使用 window.getComputedStyle() 获取元素实际渲染颜色，而非 element.style.color；后者仅返回内联样式值，对 CSS 文件或继承颜色返回空字符串，而 getComputedStyle() 返回实时计算的 rgb、rgba、hex 或 currentcolor 等格式。
直接用 window.getComputedStyle()，别碰 element.style.color —— 后者只返回空字符串或内联值，根本不是你看到的颜色。
为什么 element.style.color 总是空的
它只读取 HTML 标签里写的 style="color: red" 这种硬编码样式。哪怕 CSS 文件里写了 .btn { color: #2563eb }，或者继承自父级，element.style.color 也返回 ""。这不是 bug，是设计如此——它只管“作者写的内联样式”，不管“浏览器最终渲染成啥样”。
- 常见错误现象：控制台打印
element.style.color是空字符串，但页面上明明有颜色 - 使用场景：你想知道用户实际看到的文本色、背景色、边框色，而不是开发时随手写的那行 style
- 性能影响：无额外开销，
getComputedStyle()是原生 API，调用成本极低
window.getComputedStyle() 的正确用法
它返回一个 CSSStyleDeclaration 对象，所有属性都是只读字符串。关键点在于：必须传入真实 DOM 元素，不能传 null 或未挂载节点；且获取颜色前要确保元素已渲染（比如不要在 document.createElement 后立刻调）。
- 基础写法：
const color = window.getComputedStyle(el).color - 安全写法（防报错）：
const style = el && el.nodeType === 1 ? window.getComputedStyle(el) : null; const color = style?.color || 'transparent' - 注意兼容性：IE9+ 支持，无需 polyfill；但旧版 Safari 对
getComputedStyle(el, pseudo)伪元素支持不稳定，普通元素没问题 - 返回值格式不固定：可能是
rgb(37, 99, 235)、rgba(37, 99, 235, 0.8)、#2563eb或currentcolor—— 别假设一定是 hex
拿到 rgb/rgba 后怎么转成 hex
浏览器不提供内置转换，得自己写逻辑。重点不是“能不能转”，而是“要不要转”：如果你只是做颜色对比、透传给 canvas 或后端，保留原始格式更稳妥；只有 UI 配置面板、调试日志这类场景才需要统一成 hex。
立即学习“前端免费学习笔记（深入）”；
- 简单健壮的 rgb → hex 示例（处理空格、逗号、alpha）：
function rgbToHex(rgbStr) { const m = rgbStr.match(/rgb\((\d+),\s*(\d+),\s*(\d+)/); if (!m) return rgbStr; return '#' + m.slice(1, 4).map(x => parseInt(x).toString(16).padStart(2, '0')).join(''); } - 别用正则硬匹配
rgba再丢弃 alpha —— 如果业务真依赖透明度，转成hex8（如#2563ebcc）更合理 - 警惕
currentcolor：它表示“继承自父级 color 值”，此时应递归向上查，或直接用getComputedStyle(parent).color
最常被忽略的点：getComputedStyle() 返回的值是实时计算结果，但不会响应后续 CSS 动画或 class 切换 —— 想监听颜色变化，得用 MutationObserver 配合重查，或者监听 transitionend 事件后再取一次。
