確定元素屬性是否使用％百分比單位

Question

我正在研究一個小框架，可以使固定設計變得流暢。 所以儘管分辨率的內容適合窗口調整。

我已經很好的成功轉換計算單位px，em &點。但在大多數情況下，getComputedStyle返回符合百分比的元素的px值。

如何獲得「有效」通過CSS定義的百分比單位？ （提前思考我需要區分字體％和框模型％）。

（請沒有lodash或jQuery的答案，必須是純JS）

Answer 1

如果元素（或其父母之一）display設置爲none您可以使用JavaScript（如果指定在％獲取％的價值。 ）fiddle

function getStyle(el, property) { 
 
    var a = document.getElementById(el); 
 
    a.style.display = "none"; 
 
    if (a.currentStyle) 
 
    var b = a.currentStyle[property]; 
 
    else if (window.getComputedStyle) 
 
    var b = document.defaultView.getComputedStyle(a, null) 
 
      .getPropertyValue(property); 
 
    a.style.display = "block"; 
 
    return b; 
 
} 
 
console.log(getStyle('a', 'width'));

#a { 
 
    width: 50%; 
 
    height: 200px; 
 
}

<div id="a">jdghjfgdshf</div>