獲取元素的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; 
}