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

i found interesting phenomenon , performs different in firefox chrome.

open browser devtool f12 , type this.

var span=document.createelement("span"); document.defaultview.getcomputedstyle(span).display; 

it returns "block" in firefox , "" in chrome . first time met case in firefox , amazed me result "block"! however, when document.body.appendchid(span),it ok.

i searched in mdn withot harvest in end.i guess document.defaultview.getcomputedstyle influenced browser's rendering engine.the "display" property set after element has rendered rendering engine dom tree.and gecko(firefox) gives default value "block" while webkit(chrome) sets "".

can give more detailed explaination?

that's because spec not specify whether elements outside dom have computed styles or not.

firefox thinks do. , affected stylesheets in document.

console.log(getcomputedstyle(document.createelement('span')).display);  // "flex" on firefox

span { display: flex; }

chrome thinks don't, returns empty string. need append them document in order use getcomputedstyle.

this discussed in www-style: computedstyle of clonenode

you display: block instead of initial inline because, dictated css display,

the root element’s display type blockified.

when create span element outside document, has no parent, it's root. inline becomes block.

similarly, if had span { display: inline-block } in stylesheet, block. span { display: inline-flex } flex, span { display: inline-table } table, , on.