的getComputedStyle（）返回在FF空字符串時，而不是克羅姆返回一個計算值

Question

我爲了得到CSS值的屬性正在使用window.getComputedStyle()：

• borderRadius
• 的borderStyle
• 邊框寬度
• BORDERCOLOR

我注意到最新的FF返回空字符串，而是返回計算結果也有單位值：

FF：

"borderRadius":"","borderStyle":"","borderWidth":"","borderColor":"" 

鉻：

"borderRadius":"0px","borderStyle":"none","borderWidth":"0px","borderColor":"rgb(0, 0, 0)"} 

我想知道：

• 這種差異造成了已知的bug？
• 你知道一種強制FF以Chrome的形式返回值的方法嗎？ （我知道我可以在某些條件下添加默認值，但如果可能的話我會使用本地解決方案）。

(function (window) { 
 
     document.addEventListener('DOMContentLoaded', (event) => { 
 
      let elmTarget = document.querySelector('#target'), 
 
       elmResult = document.querySelector('#result'); 
 

 
      let styles = window.getComputedStyle(elmTarget), 
 
       result = { 
 
        borderRadius: styles.borderRadius, 
 
        borderStyle: styles.borderStyle, 
 
        borderWidth: styles.borderWidth, 
 
        borderColor: styles.borderColor 
 
       }, 
 
       resultStr = JSON.stringify(result); 
 
      console.log(resultStr); 
 
      elmResult.innerHTML = resultStr; 
 
     }); 
 
    })(window);

 #target { 
 
      background-color: blue; 
 
      width: 100px; 
 
      height: 50px; 
 
     }

<div id="target"></div> 
 
    <div id="result"></div>

Answer 1

速記。

在FF中，您需要單獨獲取所有內容。

border-left-style 
border-top-style 
border-bottom-style 
border-right-style 

border-left-width 
... 

與border-radius是甚至更長的時間：

border-top-left-radius 
border-top-right-radius 
... 

(function(window) { 
 
    document.addEventListener('DOMContentLoaded', (event) => { 
 
    let elmTarget = document.querySelector('#target'), 
 
     elmResult = document.querySelector('#result'); 
 

 
    let styles = window.getComputedStyle(elmTarget), 
 
     result = { 
 
     borderTopLeftRadius: styles.borderTopLeftRadius, 
 
     borderTopRightRadius: styles.borderTopRightRadius, 
 
     borderBottomLeftRadius: styles.borderBottomLeftRadius, 
 
     borderBottomRightRadius: styles.borderBottomRightRadius, 
 

 
     borderLeftStyle: styles.borderLeftStyle, 
 
     borderTopStyle: styles.borderTopStyle, 
 
     borderBottomStyle: styles.borderBottomStyle, 
 
     borderRightStyle: styles.borderRightStyle, 
 

 
     borderLeftWidth: styles.borderLeftWidth, 
 
     borderTopWidth: styles.borderTopWidth, 
 
     borderRightWidth: styles.borderRightWidth, 
 
     borderBottomWidth: styles.borderBottomWidth, 
 

 
     borderLeftColor: styles.borderLeftColor, 
 
     borderTopColor: styles.borderTopColor, 
 
     borderBottomColor: styles.borderBottomColor, 
 
     borderRightColor: styles.borderRightColor, 
 
     }, 
 
     resultStr = JSON.stringify(result); 
 
    console.log(resultStr); 
 
    elmResult.innerHTML = resultStr; 
 
    }); 
 
})(window);

#target { 
 
    background-color: blue; 
 
    width: 100px; 
 
    height: 50px; 
 
}

<div id="target"></div> 
 
<div id="result"></div>

Answer 2

爲什麼FF而不是在Chrome getComputedStyle()返回空字符串似乎與缺少規範的原因而鍍鉻代替改爲實施。在下面的鏈接瞭解更多信息：

https://bugzilla.mozilla.org/show_bug.cgi?id=137688