获取元素的CSS属性（宽度/高度）值（如百分比/ em/px/etc）

Question

如何获取元素CSS属性（例如width/height），因为它是用CSS规则设置的，无论它是以什么单位设置的（例如百分比/ em/px）？ （在Google Chrome中，最好是无框架的）。

使用getComputedStyle以像素为单位返回当前值，jQuery中的css()也是如此。

例如：

<div class="b">first</div> 
<div id="a" class="a">second</div> 

<style> 
    div  { width: 100px; } 
    x, div#a { width: 50%; } 
    .a  { width: 75%; } 
</style> 

尽管迭代在这个例子中所有div元件，我想能够得到第二div小号宽度50%（和第一作为100px）。

---

Chrome元素检查器可以显示CSS属性值，因此它应该可以在Chrome中使用。

---

不是一个确切复制链接的问题，因为没有公认的答案有一个简单的黑客工具，产生一个百分比宽度不管设置什么样的宽度。其余的你必须知道选择器用于制定活动规则？如何知道？

Answer 1

大家好消息！在w3的草稿中，似乎有一个CSS Typed OM。

快速阅读这个文档，看来这个的目标可能是规范，就是为了缓解从CSS中获取CSSOM值。

我们这里这样做的真正重要的是，我们将有一个CSSUnitValue API，这将能够解析CSS值的形式

{ 
    value: 100, 
    unit: "percent", // | "px" | "em" ... 
    type: "percent" // | "length" 
} 

的对象和Window.getComputedStyleMap()方法，从我们将能够获得实际应用于我们元素的价值。

截至今天，似乎只有Chrome未开始虽然实现它，你需要将实验网络平台上切换功能标志about:flags ...

(() => { 
 
    if (!window.getComputedStyleMap && !Element.prototype.computedStyleMap) { 
 
    console.error("Your browser doesn't support CSS Typed OM"); 
 
    return; 
 
    } 
 
    document.querySelectorAll('.test') 
 
    .forEach((elem) => { 
 
     let styleMap; 
 
     // As defined in specs' drafts 
 
     if (window.getComputedStyleMap) { 
 
     styleMap = window.getComputedStyleMap(elem); 
 
     } 
 
     // Currently Chrome attaches it to the Element proto 
 
     else styleMap = elem.computedStyleMap(); 
 

 
     const widthValue = styleMap.get('width'); 
 
     console.log(elem, widthValue); 
 
    }); 
 

 
/* outputs 
 

 
    <div class="b test">first</div> 
 
    CSSUnitValue { 
 
    "type": "length", 
 
    "unit": "px", 
 
    "value": 100, 
 
    [__proto__] 
 
    } 
 
    
 
    <div id="a" class="a test">second</div> 
 
    CSSUnitValue { 
 
    "type": "percent", 
 
    "unit": "percent", 
 
    "value": 50, 
 
    [__proto__] 
 
    } 
 

 
*/ 
 

 
})();

div.test { width: 100px; } 
 
x,div#a { width: 50%; } 
 
.a { width: 75%; }

<div class="b test">first</div> 
 
<div id="a" class="a test">second</div>

Answer 2

显然没有为此

https://developer.mozilla.org/en/DOM/window.getComputedStyle#Notes

编辑没有DOM API：哎呀，只是意识到这是标志着谷歌浏览器

尝试window.getMatchedCSSRules（）

Answer 3

它并不像很简单，就像调用WebKits getMatchedCSSRules()一样，它确实按照优先级顺序返回匹配的规则（虽然我没有看到文档中提到这个顺序），但是顺序不考虑属性impor优先级，不包括元素样式。所以我结束了此功能：

getMatchedStyle

function getMatchedStyle(elem, property){ 
    // element property has highest priority 
    var val = elem.style.getPropertyValue(property); 

    // if it's important, we are done 
    if(elem.style.getPropertyPriority(property)) 
     return val; 

    // get matched rules 
    var rules = getMatchedCSSRules(elem); 

    // iterate the rules backwards 
    // rules are ordered by priority, highest last 
    for(var i = rules.length; i --> 0;){ 
     var r = rules[i]; 

     var important = r.style.getPropertyPriority(property); 

     // if set, only reset if important 
     if(val == null || important){ 
      val = r.style.getPropertyValue(property); 

      // done if important 
      if(important) 
       break; 
     } 
    } 

    return val; 
} 

例

考虑下面的代码和样式规则：

<div class="b">div 1</div> 
<div id="a" class="a d2">div 2</div> 
<div id="b" class="b d3" style="width: 333px;">div 3</div> 
<div id="c" class="c d4" style="width: 44em;">div 4</div> 

<style> 
div  { width: 100px; } 
.d3  { width: auto !important; } 
div#b { width: 80%; } 
div#c.c { width: 444px; } 
x, div.a { width: 50%; } 
.a  { width: 75%; } 
</style> 

这个JS代码

var d = document.querySelectorAll('div'); 

for(var i = 0; i < d.length; ++i){ 
    console.log("div " + (i+1) + ": " + getMatchedStyle(d[i], 'width')); 
} 

提供了以下宽度为div S：

div 1: 100px 
div 2: 50% 
div 3: auto 
div 4: 44em 

（At jsFiddle）

Answer 4

有一个较新的副本后与一个伟大的答案here。该答案适用于jQuery，但易于实现in pure js。

function getDefaultStyle(element, prop) { 
    var parent = element.parentNode, 
     computedStyle = getComputedStyle(element), 
     value; 
    parent.style.display = 'none'; 
    value = computedStyle.getPropertyValue(prop); 
    parent.style.removeProperty('display'); 
    return value; 
}