"document.createElement"がどのように "display"プロパティを表示するのですか？

Question

興味深い現象が見つかりました。

ブラウザを開くdevToolをとし、F12と入力します。

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

Firefoxでは「ブロック」、Chromeでは""を返します。 私が初めてこのケースに出会ったのはFirefoxだったし、その結果が "ブロック"だったことは驚きでした！しかし、document.body.appendChid(span)の場合は問題ありませんでした。

私はMDNで検索しましたが、最後に収穫はありませんでした。document.defaultView.getComputedStyleは、ブラウザのレンダリングエンジンの影響を受けていると思います。「表示」プロパティは、レンダリングエンジンによってDOMツリーにレンダリングされた後に設定されます。そして、gecko（Firefox）はデフォルト値を "ブロック"として与え、Webkit（Chrome）はそれを ""と設定します。

誰でも詳細な説明をすることができますか？

Answer 1

これは、DOMの外部の要素が計算されたスタイルを持つかどうかを仕様で指定していないためです。

Firefoxはそう思っています。また、ドキュメントのスタイルシートの影響を受けます。

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

span { display: flex; }

Chromeはそうではないと考えて、その空の文字列を返します。 getComputedStyleを使用するには、それらをドキュメントに追加する必要があります。

これは、WWW-スタイルで議論されました：ルート要素の表示タイプは常にblockifiedある

、 CSS Displayによって決定されるように、ため computedStyle of cloneNode

あなたはdisplay: block代わりの初期inlineを取得します。

文書の外側にspan要素を作成すると、親は存在しないため、ルートです。 inlineはblockになります。

同様に、スタイルシートにspan { display: inline-block }があった場合は、blockとなります。 span { display: inline-flex }の場合はflex、span { display: inline-table }の場合はtableとなります。