HTML元素其插入到DOM

當我們運行下面的Firefox下的腳本...HTML元素其插入到DOM

var d = $("<div class='test'></div>"); 
d.hide(); 
$("body").prepend(d); 
d.show();

...看向HTML後，這個插入的元素都會有style屬性：

style =「display：block;」

在Webkit的，元件將具有：

風格= 「顯示：無;」

這個場景在我開發的JavaScript組件中使用。該組件在其內部變量中包含HTML元素的集合，並將它們插入到指定的目標容器中。

由於插入的元素具有在style屬性中初始化的display-property，所以它會覆蓋CSS。這打破了頁面的佈局。

作爲一種快速解決方案，我可以在將元素插入到DOM之前存儲「樣式」屬性，並在插入之後將存儲的版本寫入已創建的版本。

有沒有更好的解決方案？

爲什麼會發生這種情況，我該如何檢查元素是否尚未插入DOM？

來源

2011-03-19 AntonAL

When I do that與任何Chrome或Safari（包括基於WebKit的瀏覽器），如果我檢查與內置工具的元素，它沒有style.display財產可言，因此使用的display: block默認div風格。（Here's a version在div中有一些文字，所以用DOM檢查器查看和查找更容易）。

所以我懷疑問題在於別處。例如，是否存在可能在WebKit上失敗的干預代碼，因此d.show();永遠不會被調用？這當然可以解釋它。使用Chrome或Safari中的內置工具可以很容易地在創建div的代碼上設置斷點並遍歷它。

回覆你的問題：

...我怎麼能檢查是否元素還未插入到DOM？

這個問題在這裏問在計算器上剛剛，而具體到jQuery的其中一個答案是相當優雅：

if (d.closest("body").length == 0) { 
    // It's not in the DOM yet 
}

更新：回覆如下

您的評論
用Firefox瀏覽此測試頁。 div有「style = display：block;」明確定義。在Webkit下，它有空的樣式屬性。我在Firefox和Safari中使用內置的檢查器。

啊，沒關係，所以這個問題是不是在WebKit瀏覽器一個display: none（你有關的問題發言使我誤入歧途），而火狐（和其他可能的Gecko瀏覽）最終不得不display: block上元素。

我可能會接近這個是這樣的：

var d = $("<div class='test'></div>"); 
d.addClass("hidden"); 
$("body").prepend(d); 
d.removeClass("hidden");

...這個CSS：

.hidden { 
    display: none; 
}

Live copy

這樣，你知道你不會最終得到一個style.display屬性。

更新2：你可以做的另一件事是直接刪除style.display屬性：

var d = $("<div class='test'>Hi there</div>"); 
d.hide(); 
$("body").prepend(d); 
d.show(); 
d[0].style.display = "";

Live example

你提到的效果，所以如果你在做fadeIn或類似的東西，使用回調：

var d = $("<div class='test'>Hi there</div>"); 
d.hide(); 
$("body").prepend(d); 
d.fadeIn(function() { 
    this.style.display = ""; 
});

Live example

來源

2011-03-19 10:27:10

看看使用Firefox這個測試頁面。 div有「style = display：block;」明確定義。在Webkit下，它有空的樣式屬性。我在Firefox和Safari中使用內置的檢查器。 – AntonAL 2011-03-19 11:05:11

@AntonAL：我明白你在說什麼了。更新了答案。 – 2011-03-19 11:19:15

我對CSS僅有的效果有着同樣的想法。它可以工作，但是當我們在做removeClass（）時，CSS動畫將不會播放。我們應該在一些小的時間間隔後，比如說100毫秒。謝謝！ – AntonAL 2011-03-19 11:51:56

怎麼樣，如果你這樣做

var d = $("<div class='test'></div>"); 
d.hide(); 
$("body").prepend(d); 
d.removeAttr('style'); // this will revert to the original styling

來源

2011-03-19 11:21:47

它可以工作，但它不會恢復樣式attr，它會清除它。謝謝。 – AntonAL 2011-03-19 11:52:41

@安頓的確如此。但是因爲你的代碼只通過'.hide（）'方法添加'display：none'，所以刪除style屬性返回到'.test'類指定的任何東西。 – 2011-03-19 12:56:40

HTML元素其插入到DOM

回答

相關問題