javascript - 阅读 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)”。我想知道的是——规范是否保证了这一点？还是浏览器可以自由返回任何有效表示？

Answer 1

当你要get a value from a CSSStyleDeclaration , 浏览器必须调用 serialize a CSS value算法。

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

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

我们的 的 alpha 值为 1，我们将使用“不透明颜色的 rgb() 函数等价物的序列化”

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

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

而且我认为大多数浏览器都遵循规范的这一部分，因为很长一段时间以来，它被认为是安全的假设，现代浏览器将返回这个值。

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

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 有更少的副作用。