当我们在Firefox下运行以下脚本时......
var d = $("<div class='test'></div>");
d.hide();
$("body").prepend(d);
d.show();
...并且看看HTML，这个插入的元素将具有样式属性：
style =“display：block;”
在Webkit下，元素将具有：
style =“display：none;”
这个场景用于JavaScript组件，我开发。该组件在其内部变量中包含一组HTML元素，并将它们插入到指定的目标容器中。
因为插入元素在style属性中初始化了display-property，所以它会覆盖CSS。这打破了页面的布局。
作为一种快速解决方案，我可以在将元素插入DOM之前存储“style”属性，并在插入之后，将存储的版本写入创建的版本。
有没有更好的解决方案？
为什么会发生这种情况并且如何检查元素是否尚未插入DOM ？
答案 0 :(得分：2)
When I do that，如果我使用内置工具检查元素，它根本没有style.display属性，因此默认{ {1}}使用div的样式。 （Here's a version在div中包含一些文本，因此使用DOM检查器更容易查看和查找。）
所以我怀疑问题出在其他地方。例如，是否存在可能在WebKit上失败的干预代码，因此display: block永远不会被调用？这肯定会解释它。使用Chrome或Safari中的内置工具可以轻松设置创建div的代码的断点并遍历它。
重新提问：
...如何检查元素是否尚未插入DOM？
最近在StackOverflow上提出了这个问题，jQuery特有的答案之一相当优雅：
d.show();更新：在下方重新发表评论
使用Firefox查看此测试页面。 div有“style = display：block;”明确定义。在Webkit下，它具有空样式attr。我在Firefox和Safari中都使用了内置的检查器。
啊，好吧，所以问题不是WebKit浏览器中的if (d.closest("body").length == 0) {
// It's not in the DOM yet
}
（关于问题的陈述让我误入歧途），而是Firefox（以及可能的其他Gecko浏览器）最终拥有{元素上的{1}}。
我可能会这样做：
display: none...用这个CSS：
display: block这样，您知道您根本不会设置var d = $("<div class='test'></div>");
d.addClass("hidden");
$("body").prepend(d);
d.removeClass("hidden");
属性集。
更新2 ：您可以做的另一件事是直接删除.hidden {
display: none;
}
属性：
style.display你提到了效果，所以如果你正在做style.display或类似的事情，请使用回调：
var d = $("<div class='test'>Hi there</div>");
d.hide();
$("body").prepend(d);
d.show();
d[0].style.display = "";
答案 1 :(得分：0)
如果你这样做
var d = $("<div class='test'></div>");
d.hide();
$("body").prepend(d);
d.removeAttr('style'); // this will revert to the original styling