如何准确获取元素内联样式中原始的CSS颜色函数值（如hsl、hwb）

浏览器通过 element.style.color 返回标准化的 rgba() 值，会丢失原始 CSS 中使用的 hsl()、hwb() 等函数信息；要还原用户设置的原始颜色表达式，需解析 style 属性字符串而非依赖 style 对象。

浏览器通过 `element.style.color` 返回标准化的 `rgba()` 值，会丢失原始 css 中使用的 `hsl()`、`hwb()` 等函数信息；要还原用户设置的原始颜色表达式，需解析 `style` 属性字符串而非依赖 `style` 对象。

在现代 CSS 中，hsl()、hwb()、lab()、color() 等函数提供了更直观、更符合人眼感知的颜色定义方式。然而，当开发者尝试通过 JavaScript 读取内联样式的颜色值时（例如 element.style.color），浏览器统一将其解析并序列化为 rgba() 格式——无论原始声明是 hsl(82 39% 30.2% / 0.9) 还是 hwb(82 18.4% 58% / 0.9)，最终返回的都是类似 rgba(85, 107, 47, 0.9) 的字符串。

这一行为符合 CSS Object Model（CSSOM）规范：element.style 是一个已解析、已计算的样式映射对象，其属性值始终为标准化后的表示形式（通常是 rgb() 或 rgba()），不保留原始语法。这意味着你无法通过 style.color 判断用户究竟写了 hsl() 还是 hwb()，也无法直接还原空格分隔、斜杠 / 透明度等现代语法特征。

✅ 正确解法：从 element.getAttribute('style') 获取原始字符串，再手动解析
由于 getAttribute('style') 返回的是开发者写入 HTML 或通过 setAttribute 设置的原始 style 字符串（未经解析），它完整保留了 CSS 函数名、空格、百分号、/ 透明度语法等所有细节。我们可通过简单字符串处理提取目标属性：

const inlineStyle = (el) => {  const styleStr = el.getAttribute('style');  if (!styleStr) return {};  return styleStr    .split(';')    .map(p => p.trim())    .filter(p => p)    .reduce((acc, pair) => {      const colonIndex = pair.indexOf(':');      if (colonIndex === -1) return acc;      const prop = pair.slice(0, colonIndex).trim().toLowerCase();      const value = pair.slice(colonIndex + 1).trim();      acc[prop] = value;      return acc;    }, {});};// 使用示例const hslEl = document.getElementById('hsl').previousElementSibling;console.log(inlineStyle(hslEl).color); // → "hsl(82 39% 30.2% / 0.9)"const hwbEl = document.getElementById('hwb').previousElementSibling;console.log(inlineStyle(hwbEl).color); // → "hwb(82 18.4% 58% / 0.9)"

⚠️ 注意事项：

• 该方法仅适用于内联样式（style 属性），无法获取 CSS 文件或 <style> 标签中定义的规则；若需读取外部样式，需结合 getComputedStyle()（但其仍返回标准化 rgba）或使用 CSSStyleSheet API（复杂且有跨域限制）。
• 解析逻辑未做深度校验（如无效声明、注释、!important），生产环境建议使用成熟库如 css-tree 或正则增强版解析器。
• element.style.cssText 同样经过浏览器解析，不可靠；它与 style.color 一样会将 hsl() 转为 rgb()，不保留原始函数。

? 补充说明：这是当前浏览器的稳定行为，且短期内不会改变。CSS 规范（如 CSS Color Module Level 4）明确将 element.style.* 定义为“已解析值”的只读接口，而原始语法保留在 CSSStyleDeclaration.cssText（已解析）和 getAttribute('style')（原始）的职责分离中。W3C 无计划修改此设计——因为保留原始语法会增加引擎复杂度，且对绝大多数用例（如颜色计算、动画插值）并无实际价值。

立即学习“前端免费学习笔记（深入）”；

总结：若需还原用户输入的原始颜色函数（hsl/hwb/lab 等），唯一可靠途径是解析 getAttribute('style') 字符串。这是前端开发中处理“语义化 CSS 输入”与“标准化 DOM 输出”差异的经典实践，适用于主题编辑器、设计系统调试工具、CSS 代码生成器等场景。