使用window.getComputedStyle pseuso元素樣式與css計算

Question

我有一些元素在網頁上有一個前僞元素的高度與CSS calc（）函數樣式;是這樣的：

.el:before: { 
    content: ""; 
    height: calc(50% + 10px); 
} 

我想用this method得到:before元素的高度 - 在基於Webkit的瀏覽器它的工作原理，並返回一個像素值。

var height = window.getComputedStyle(
    document.querySelector('.el'), ':before' 
).getPropertyValue('height'); 

在Firefox中，但是，它返回CSS規則（恰好'calc(50% + 10px)'）的實際字符串。

(function() { 
 
    var height = window.getComputedStyle(
 
    document.querySelector('.myelem'), ':before' 
 
).getPropertyValue('height'); 
 
    
 
\t document.getElementById('result').innerHTML = 'Calculated height is: ' + height; 
 
})();

.myelem { 
 
    position: relative; 
 
    padding-left: 20px; 
 
} 
 
.myelem:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    width: 1px; 
 
    height: calc(50% + 2px); 
 
    background-color: red; 
 
}

<div> 
 
    <div class="myelem"> 
 
    <span>Some stuff here</span> 
 
    </div> 
 
</div> 
 

 
<div id="result"> 
 

 
</div>

有沒有變通的呢？

Answer 1

這確實是一個錯誤，

對於修復，你可以爲這個bug-report從2013年開始進行投票，並希望它最終會得到修復，甚至提出了一個補丁，如果你有一段時間，C++知識; - ）

有關解決方法，你就必須自己計算吧...