Question

我注意到如果我将样式颜色设置为命名颜色或RGB值，它将在检索时保留该字面值。但是，当设置为十六进制字符串或HSL字符串时，它会自动转换为RGB字符串：

＆＃13;

let body = document.querySelector('body');
console.log(body.style.backgroundColor); // ""

body.style.backgroundColor = 'white';
console.log(body.style.backgroundColor); // white

body.style.backgroundColor = 'rgb(255, 0, 0)';
console.log(body.style.backgroundColor); // rgb(255, 0, 0)

body.style.backgroundColor = '#0080ff';
console.log(body.style.backgroundColor); // rgb(0, 128, 255)

body.style.backgroundColor = 'hsl(195, 100%, 50%)';
console.log(body.style.backgroundColor); // rgb(0, 191, 255)

＆＃13;

这种行为背后的理由是什么？

Answer 1

浏览器供应商之间的共识似乎是将HTMLElement.style（和CSS2Properties对象）中的颜色作为规范化关键字检索，如果它是由关键字设置的，则采用标准化rgb格式，否则，对于alpha值小于1的颜色，在标准化rgba中。

请注意，getComputedStyle仅包含严格的rgb/rgba值。

这个片段似乎在所有浏览器中产生了非常相似的结果：

＆＃13;

`red
Red
rED
#f00
#Ff0000
rgb(255,0,0)
rgba(255,0,0,1)
rgba(255,0,0,0.8)
hsl(0, 100%, 50%)`.split(`
`).forEach(c => {
  document.body.style.color = c;
  console.log({
    'set     ': c,
    'style   ': document.body.style.color,
    'computed': getComputedStyle(document.body).color
  })
});

＆＃13;

.as-console-wrapper.as-console-wrapper {
  top: 0;
  max-height: none;
}

＆＃13;

相同＆＃34;关键字规范化＆＃34;即使从CSS2Properties

中读取CSSStyleRule对象，也会发生这种情况

＆＃13;

document.write(document.styleSheets[0].cssRules[0].style.getPropertyValue('color'))

＆＃13;

body { color: rED;}

＆＃13;

但是，无法在任何标准中找到权威声明，告诉UA供应商这样做。

Answer 2

但是，当设置为十六进制字符串或hsl字符串时，它会自动获得转换为rgb字符串而不是

根本没有转换。它是相同的相同表示。其默认输出采用rgb(r,g,b)格式。不同之处在于setter采用不同的等效输入格式，然后在内部将它们解析为相同的表示形式。

为什么javascript与颜色字符串规范化的方式不一致？

2 个答案: