阅读 elem.style——规范保证结果格式吗？

Question

const box = document.getElementById('box');
box.style.backgroundColor = '#ff0000';
console.log(box.style.backgroundColor);

#box {
  width: 50px;
  height: 50px;
}

<div id="box"></div>

这会在 Chrome 75 中打印出 "rgb(255, 0, 0)"。我想知道的是——这是否符合规范？还是浏览器可以自由 return 任何有效的表示？

Answer 1

当你要get a value from a CSSStyleDeclaration, the browser has to call the serialize a CSS value算法时。

不同的值会有不同的解析规则。

如果我们取你的值，backgroundColor是一个长写属性，所以我们可以直接跳转到组件#FF0000，是一个组件。因此，我们必须使用算法 described here:

我们的的 alpha 值为 1，我们将使用 "the serialization of the rgb() functional equivalent of the opaque color"

 "rgb(" + 255 + ", " + 0 + ", " + 0 + ")"

如果我们遵循规范，这个特定示例的输出非常清晰。

而且我认为大多数浏览器确实遵循规范的这一部分，因为足够长的时间可以安全地假设现代浏览器将 return 这个值。

但这并不适用于所有 CSS 值。如果您以 shorthand 值为例，那么不同的浏览器将输出不同的结果，因为规范对于应该发生的情况更为宽松。

const style = document.createElement('a').style;
style.background = "#FF0000";
console.log(style.background);

// in Firefox "rgb(255, 0, 0) none repeat scroll 0% 0%"
// in Chrome and Safari "rgb(255, 0, 0)"

其他组件也是如此，例如浏览器不同意 url() 函数的输出格式。

const style = document.createElement('a').style;
style.backgroundImage = "url('foo.bar'),  url('baz.bla')";
console.log(style.backgroundImage);

// in Firefox and Chrome 'url("foo.bar"), url("baz.bla")'
// in Safari 'url("https://stacksnippets.net/foo.bar"), url("https://stacksnippets.net/baz.bla")'

// and IIRC previous versions of one of these browsers did use `'` instead of `"` for quite a long time.

所以我不确定你真正想要的是什么，但如果你想要的只是将 #RrGgBb 符号解析为 rgb() 符号，你可能更喜欢 do it manually，至少因为它应该比使用 CSSStyleDeclaration.

少 side-effects

阅读 elem.style——规范保证结果格式吗？

Reading elem.style -- is result format guaranteed by spec?

javascript

css

specifications