Question

我发现了一个有趣的现象，它在Chrome中的表现与Chrome不同。

用 F12 打开浏览器devTool并输入。

var span=document.createElement("span");
document.defaultView.getComputedStyle(span).display;

它返回＆＃34;阻止＆＃34;在Firefox中和Chrome中的""。我第一次遇到这个案子是在Firefox中，结果是＆＃34;阻止＆＃34;！但是，当document.body.appendChid(span)时，没关系。

我在MDN中搜索但最后没有收获任何收获。我猜document.defaultView.getComputedStyle受浏览器渲染引擎的影响。＆＃34;显示＆＃34;在元素由呈现引擎呈现给DOM树之后设置属性。然后gecko（Firefox）给它一个默认值为＆＃34; block＆＃34;而webkit（Chrome）则设置了它＆＃34;＆＃34;。

任何人都可以提供更详细的解释吗？

Answer 1

那是因为规范没有指定DOM之外的元素是否有计算样式。

Firefox认为他们这样做。它们受文档中样式表的影响。

＆＃13;

console.log(getComputedStyle(document.createElement('span')).display);
// "flex" on Firefox

＆＃13;

span { display: flex; }

＆＃13;

Chrome认为他们没有，所以返回空字符串。您需要将它们附加到文档才能使用getComputedStyle。

这在www-style中讨论过：computedStyle of cloneNode

您获得的是display: block而不是inline，因为CSS Display指示了

根元素的显示类型始终为blockified。

在文档外部创建span元素时，它没有父元素，因此它是根。然后inline变为block。

同样，如果您的样式表中有span { display: inline-block }，那么您也会获得block。使用span { display: inline-flex }，您将获得flex，span { display: inline-table }获得table，依此类推。

怎么＆＃34; document.createElement＆＃34;适用于＆＃34;显示＆＃34;属性

1 个答案: