javascript:用单位获取css prop值

Question

我的代码是这样的:

#image_1 {
   position: absolute;
   top: 3vw;  
}

我的尝试:http: //jsfiddle.net/z8k6t3fb/1/

我想要'3vw'

可能吗 ？

Answer 1

您可以迭代document.styleSheets,.cssRules如果.selectorText匹配元素选择器,则从.style属性中选择规则

window.onload = function() {
  var element = document.getElementById("image_1");
  var prop = "top";
  var styles = document.styleSheets;
  for (var j = 0; j < styles.length; j++) {
    var rules = document.styleSheets[j].cssRules;
    for (var i = 0; i < rules.length; i++) {
      if (rules[i].selectorText === "#" + element.id) {
        console.log(rules[i].style[prop])
      }
    }
  }
}

#image_1 {
  position: absolute;
  top: 3vw;
}

<div id="image_1">hello</div>