Javascript 当通过element.style.background进行设置时，浏览器会自动将十六进制或hsl颜色评估为rgb？

我不确定我是否遗漏了一些明显的东西，但有人能给我解释一下吗？下面的代码片段来自我在ChromeDevTools控制台上所做的操作。Firefox的结果也是如此

> let container = document.createElement("div")
> undefined
> container.style.background = "#bbb"
> "#bbb"
> container
> <div style=​"background:​ rgb(187, 187, 187)​;​">​</div>​
> container.style.background = "hsl(120, 50%, 50%)"
> "hsl(120, 50%, 50%)"
> container
> <div style=​"background:​ rgb(63, 191, 63)​;​">​</div>​

>让容器=document.createElement（“div”）
>未定义
>container.style.background=“#bbb”
>“#bbb”
>容器
> ​​
>container.style.background=“hsl（120,50%，50%）”
>“hsl（120、50%、50%）”
>容器
> ​​

这是为了更好的可读性的图片

这是标准行为吗？如果是这样的话，我如何把真正的十六进制或HSL值放在内联样式中

根据：

如果该值是半透明的，则计算出的值将是相应的

rgba（）。如果不是，它将是相应的
rgb（）

这意味着无论您的输入是什么，计算出的值始终会产生
rgb
或
rgba

因此，回答您的问题：是，这是标准行为，否，您不能使用十六进制或hsl，因为它将被计算回rgba。
我的解决方案是使用“outerHTML”！
这是唯一一个我们可以提取真彩色格式的地方

function realBkgColor(elem){
    let outer = elem.outerHTML.replace(/\s/g,'');
    let tag = outer.split('<'+elem.tagName).pop().split('>')[0];
    let style = tag.split('style="').pop().split('"')[0];
    let color = style.split('background-color:').pop().split(';')[0];
    return color;
}
div = document.querySelector('div');
div.innerHTML = realBkgColor(div);

函数realBkgColor（elem）{
让outer=elem.outerHTML.replace（/\s/g'）；
let tag=outer.split（“”）[0]；
让style=tag.split（'style=“”）.pop（）.split（“”）[0]；
让color=style.split（'background-color:'）.pop（）.split（'；'）[0]；
返回颜色；
}
div=document.querySelector（'div'）；
div.innerHTML=realBkgColor（div）；

返回“#ffff00”而不是“rgb（255，255，0）”



试试这些…
因为浏览器就是这么做的。为什么需要十六进制格式？这样我以后可以用我设置的格式查询它。对于现有的行为，我要么将其转换回去，要么维护一个单独的数据属性，要么使用css类，而不用担心它。如果您需要查看它是否有XYZ颜色，那么您应该知道如何查找XYZ类。在我的例子中，我不能这样做，因为所有元素都是从一个数据集生成的，该数据集只是一个不同格式的颜色数组。串。我可以接受浏览器的这种行为，但我想知道他们为什么这样做，或者一个指向说明浏览器应该这样做的规范的指针。我的解决方法是使用
数据-
属性，因为我不想执行颜色转换的计算：（酷！谢谢你指出这一点。我应该看一下规范中的计算值。有趣的是，我没有看到像
绿色
，
白色
等命名颜色出现同样的情况。我现在到处都看到这一行，但我似乎在实际的W3C规范中找不到它。当我只搜索这一行时，它会在任何颜色上弹出。）关于MDN的相关文章，但我似乎在实际的规范中找不到它（甚至在他们的链接规范或计算值规范中也找不到）…你能给我一个方向吗？
<div style="background-color: #ffff00"></div>
<!--
<div style="background-color: rgb(255, 255, 0)"></div>
<div style="background-color: hsl(60, 100%, 50%)"></div>
<div style="background-color: yellow"></div>
-->