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")

没有yourDiv元素。

谢谢。

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)

Answer 2

创建一个临时元素将是我的方式但是（至少在我的测试中），你必须将元素插入到文档中（因此display = 'none'）

＆＃13;

function getStyle() {
  var e = document.createElement('div');
  e.className = 'foo';
  e.style.display = 'none';
  document.body.appendChild(e);

  var style = window.getComputedStyle(e),
    obj = {
      'min-width': style['min-width'],
      'min-height': style['min-height']
    };
  document.getElementById('out').innerHTML = JSON.stringify(obj, null, '  ');
  document.body.removeChild(e);
}

＆＃13;

.foo {
  min-width: 30px;
  min-height: 30px;
}

＆＃13;

<button onclick="getStyle()" type="button">Get <code>.foo</code> style</button>

<pre id="out"></pre>

＆＃13;

没有源元素的JavaScript getComputedStyle？

2 个答案: