通过 element.style.background 设置时，浏览器会自动将 hex 或 hsl 颜色评估为 rgb? [英] Browsers automatically evaluate hex or hsl colors to rgb when setting via element.style.background?

问题描述

我不确定我是否遗漏了一些明显的东西，但有人可以向我解释一下吗?以下代码片段来自我在 Chrome DevTools Console 上所做的.Firefox 的结果也是如此.

I am not sure if I am missing something obvious but can somebody explain this to me? The following snippet is from what I did on Chrome DevTools Console. Same is the result for 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>​

这是为了提高可读性的图片.

Here's the image for better readability.

这是标准行为吗?如果是这样，我如何将真正的 HEX 或 HSL 值放入内联样式中?

Is this the standard behaviour? If so, how do I get to put the real HEX or HSL value in inline style?

推荐答案

根据 规范:

如果值为半透明，则计算出的值为rgba()对应的值.如果不是，它将是 rgb() 对应的一个.

If the value is translucent, the computed value will be the rgba() corresponding one. If it isn't, it will be the rgb() corresponding one.

意味着无论您的输入是什么，计算出的值总是导致 rgb 或 rgba.

Meaning that no matter what is your input, the computed value always results in either rgb or rgba.

所以，回答您的问题:是，这是标准行为，否，您不能使用十六进制或 hsl，因为它会被计算回 rgba.

So, answering your question: yes, it is standard behaviour and no, you can't use hex or hsl as it will be computed back to rgba.

这篇关于通过 element.style.background 设置时，浏览器会自动将 hex 或 hsl 颜色评估为 rgb?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！