「document.createElement」如何工作以「顯示」屬性

我發現了一個有趣的現象，它在Firefox中的表現與Chrome不同。「document.createElement」如何工作以「顯示」屬性

打開你的瀏覽器devTool與F12並鍵入這個。

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

它在Firefox中返回「block」，在Chrome中返回""。我第一次遇到這個案例是在Firefox中，它讓我驚訝，結果是「塊」！但是，當document.body.appendChid(span)，這是確定的。

我在MDN中搜索，但沒有收到任何收穫。我想document.defaultView.getComputedStyle受瀏覽器渲染引擎的影響。「display」屬性在渲染引擎呈現給DOM樹之後設置。而壁虎（Firefox）給它一個默認值爲「block」，而webkit（Chrome）設置它爲「」。

任何人都可以給出更詳細的解釋嗎？

來源

2016-11-06 PageYe

你試過新的'Tab'，'about：blank'嗎？什麼是'文檔'的用戶代理樣式？ – guest271314

@ guest271314謝謝您的回答。用戶代理樣式中的標籤顯示在Chrome中沒有任何意義，這意味着它是「內聯」的。但是在Firefox中它是「block」，但我不知道它來自哪裏，因爲display不是繼承的CSS屬性。 – PageYe

這是因爲規範沒有指定DOM之外的元素是否已經計算了樣式。

Firefox認爲他們這樣做。它們受文檔中樣式表的影響。

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

span { display: flex; }

鉻認爲他們不這樣做，那麼返回空字符串。您需要將它們附加到文檔以便使用getComputedStyle。

這在WWW式討論：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，依此類推。

來源

2016-11-06 02:49:55 Oriol

，它清除了我的一些難題。謝謝，但標籤的'display：block'是從哪裏來的？它不是用戶代理風格，我沒有發現span的'display' css屬性。而'display'不是繼承的CSS屬性。就是它'塊'，這是DOM外的元素的顯示屬性的默認值？@Oriol – PageYe

@PageYe好點，CSS顯示確實阻止了根元素。 – Oriol

抱歉什麼是'blockify'？它讓我困惑。 – PageYe

「document.createElement」如何工作以「顯示」屬性

回答

相關問題