Javascript/Jquery : get 'display' css style for DOM element that wasn't appended to web page

Question

假设我有一个类“.someClass”:

.someClass {
    display: none;
}

然后在 javascript 代码中创建 div，然后为 div 应用类:

var myDiv = document.createElement("div");
myDiv.className = "someClass";

现在是否可以在不将其附加到网页的情况下检查“myDiv”是否具有样式“display: none”？

或者测试“显示”属性的唯一方法是将“myDiv”附加到页面，然后快速检查“$(myDiv).css('display')”，然后将其从页面中删除？

谢谢，非常感谢帮助。

Answer 1

在将元素添加到页面之前，您无法检查该属性。 CSS 规则属于文档，并且在许多情况下取决于元素在 DOM 树中的位置。在添加元素之前，不会填充 CSS 属性。

您可以在 chrome 控制台中测试它:

var div = document.createElement('div');
getComputedStyle(div);

您将获得一个对象，其中所有 CSS 属性都应用于 DIV，您会发现它们都是空的。

现在，如果你这样做:

document.body.appendChild(div);
getComputedStyle(div);

您会看到它们现在已填满。当一个元素从 DOM 中移除时也会发生这种情况，而不仅仅是当它没有被附加时。