如何“document.createElement"工作到“显示”;财产

how "document.createElement" works to "display" property

本文关键字：显示 财产 工作 quot document createElement 如何      更新时间：2023-09-26

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

用F12打开你的devTool浏览器，然后输入如下:

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

在Firefox中返回"block"，在Chrome中返回""。我第一次遇到这种情况是在Firefox中，它让我惊讶的是，结果是"block"!然而，当document.body.appendChid(span)时，它是ok的。

我在MDN中搜索，但最后没有任何收获。我猜document.defaultView.getComputedStyle是受浏览器渲染引擎的影响。"display"属性是在渲染引擎将元素渲染到DOM树之后设置的。gecko(Firefox)将其默认值设置为"block"，而webkit(Chrome)将其设置为"。

谁能给一个更详细的解释?

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

Firefox认为它们可以。它们会受到文档中样式表的影响。

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

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

这在cloneNode的www-style: computedStyle中讨论过

你得到display: block而不是最初的inline，因为，根据CSS显示，

根元素的显示类型总是被阻塞。

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

同样，如果样式表中有span { display: inline-block }，那么也会得到block。span { display: inline-flex }可以得到flex, span { display: inline-table }可以得到table，以此类推。
相关文章：