浏览器通过 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 文件或
- 解析逻辑未做深度校验（如无效声明、注释、!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 代码生成器等场景。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
