getComputedStyle（）はプロパティのCSS値を取得するために、代わりにクロームが計算値

Question

を返すとき、私はwindow.getComputedStyle()を使用していますFFに空の文字列を返します。

• borderRadius
• のborderStyle
• borderWidth
• BORDERCOLOR

最新のFFが空の文字列を返すことに気付きましたが、代わりに計算されたまた、単位を持つ値：

FF：

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

クローム：

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

私が知りたいのですが：

• 既知のバグによって引き起こされるこの矛盾はありますか？
• 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-radiusはさらに長いものと

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

border-left-width 
... 

：

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

ChromeでgetComputedStyle()戻りFFとないでは空の文字列ではなくクローム欠落している仕様に関連すると思われる理由代わりに実装します。下記のリンクではより多くの情報：のborderStyle、borderWidth、BORDERCOLORについて

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