没有源元素的 JavaScript getComputedStyle？

Question

本质上，我试图使用 getComputedStyle 来获取属性值，而无需(直接)访问元素。请阅读下面的说明以了解更多详细信息。

这很难解释，如果你不明白，请告诉我。

这是我的 CSS 代码:

.yScrollButton{
    background-color:#aaa;
    width:100%;
    position:absolute;
    top:0;
    min-height:30px;
}
.xScrollButton{
    background-color:#aaa;
    height:100%;
    position:absolute;
    top:0;
    min-width:30px;
}

链接到这些类的元素是用 JavaScript 生成的。如何在不使用元素的情况下获取 min-width:30px; 或 min-width:30px; 属性值。通常对于这种情况，您使用 getComputedStyle https://stackoverflow.com/a/18676007/3011082但在这种情况下，我无法获得计算样式的源元素(请参见下面的示例)!

var yourDiv = document.getElementById("some-id");
getComputedStyle(yourDiv).getPropertyValue("margin-top")

再一次，这令人困惑，所以如果你不明白请告诉我:)解决方案必须只使用 JavaScript，不能使用 JQuery。

现在我想到了，理解这个问题更好的方法是使用

var yourDiv = document.getElementById("some-id");
    getComputedStyle(yourDiv).getPropertyValue("margin-top")

without the yourDiv element.

谢谢。

Answer 1

var div = document.createElement("div")
div.className = "yScrollButton" // or xScrollButton
getComputedStyle(div).getPropertyValue("min-width")

这就是你要找的吗？

---

编辑:也许您必须先将它添加到 DOM(@Phil):这是在不改变原始元素属性的情况下执行此操作的方法。您也可以跳过 hiddenDiv，并在 div 本身上设置 display = "none"

var hiddenDiv = document.createElement("div")
hiddenDiv.style.display = "none"
document.body.appendChild(hiddenDiv)

var div = document.createElement("div")
hiddenDiv.appendChild(div)

div.className = "yScrollButton" // or xScrollButton
getComputedStyle(div).getPropertyValue("min-width")

hiddenDiv.parentNode.removeChild(hiddenDiv)

短:

var div = document.createElement("div")
div.style.display = "none"
document.body.appendChild(div)

div.className = "yScrollButton" // or xScrollButton
getComputedStyle(div).getPropertyValue("min-width")

div.parentNode.removeChild(div)