javascript - 内存中的 HTML 元素和插入到 DOM 后的显示问题

Question

当我们在 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？

Answer 1

When I do that使用 Chrome 或 Safari(都是基于 WebKit 的浏览器)，如果我使用内置工具检查元素，它根本没有 style.display 属性，所以默认的 div 风格的 display: block 使用。 (Here's a version 在 div 中有一些文本，因此使用 DOM 检查器更容易查看和查找。)

所以我怀疑问题出在其他地方。例如，是否存在可能在 WebKit 上失败的干预代码，以便 d.show(); 永远不会被调用？那肯定会解释它。使用 Chrome 或 Safari 中的内置工具可以轻松地在创建 div 的代码上设置断点并遍历它。

关于你的问题:

...how can i check, whether element is not yet inserted to the DOM ?

这个问题是最近在 StackOverflow 上被问到的，其中一个特定于 jQuery 的答案相当优雅:

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

---

更新:在下方回复您的评论

Look at this test page with Firefox. The div has "style=display: block;" explicitly defined. Under Webkit, it has empty style attr. I'm using built-in inspector in both Firefox and Safari.

啊，好吧，所以问题不是 WebKit 浏览器中的 display: none (你在问题中的陈述让我误入歧途)，而是 Firefox(可能还有其他 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