Question

我正在使用window.getComputedStyle()来获取属性的CSS值：

borderRadius
的borderStyle
边框宽度
BORDERCOLOR

我注意到最新的FF返回空字符串，而Chrome则返回计算值以及单位：

FF：

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

铬：

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

我想知道：

这种差异是由已知错误造成的吗？
你知道一种强制FF将值作为Chrome返回的方法吗？（我知道我可以添加一些条件的默认值，但如果可能的话我会使用原生解决方案。）

＆＃13;

    (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);

＆＃13;

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

＆＃13;

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

＆＃13;

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

getComputedStyle()在FF上返回空字符串而不在Chrome中返回空字符串的原因似乎与缺少Chrome的规格相关，而不是Chrome实现的。更多信息，请访问以下链接：

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

当Crome返回计算值时，getComputedStyle（）在FF上返回空字符串

2 个答案: