Javascript getComputedStyle()返回FF上的空字符串,而Crome则返回计算值

Javascript getComputedStyle()返回FF上的空字符串,而Crome则返回计算值,javascript,css,Javascript,Css,我正在使用window.getComputedStyle()获取属性的CSS值: 边界半径 边界样式 边界宽度 边界色 我注意到,最新的FF返回空字符串,而Chrome则返回带有单位的计算值: FF: 铬: "borderRadius":"0px","borderStyle":"none","borderWidth":"0px","borderColor":"rgb(0, 0, 0)"} 我想知道: 这种差异是由已知错误引起的吗 你知道一种强制FF以Chrome的形式返回值的方法吗?(我

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

  • 边界半径
  • 边界样式
  • 边界宽度
  • 边界色
我注意到,最新的FF返回空字符串,而Chrome则返回带有单位的计算值:

FF:

铬:

"borderRadius":"0px","borderStyle":"none","borderWidth":"0px","borderColor":"rgb(0, 0, 0)"}
我想知道:

  • 这种差异是由已知错误引起的吗
  • 你知道一种强制FF以Chrome的形式返回值的方法吗?(我知道我可以在某些条件下添加默认值,但如果可能,我希望使用本机解决方案)
(功能(窗口){
document.addEventListener('DOMContentLoaded',(事件)=>{
设elmTarget=document.querySelector(“#target”),
elmResult=document.querySelector(“#result”);
让样式=window.getComputedStyle(elmTarget),
结果={
borderRadius:styles.borderRadius,
borderStyle:styles.borderStyle,
borderWidth:styles.borderWidth,
borderColor:styles.borderColor
},
resultStr=JSON.stringify(结果);
console.log(resultStr);
elmResult.innerHTML=resultStr;
});
})(窗口)
#目标{
背景颜色:蓝色;
宽度:100px;
高度:50px;
}

速记。

在FF中,您需要单独获取所有内容

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

border-left-width
...
边界半径
更长:

border-top-left-radius
border-top-right-radius
...
(功能(窗口){
document.addEventListener('DOMContentLoaded',(事件)=>{
设elmTarget=document.querySelector(“#target”),
elmResult=document.querySelector(“#result”);
让样式=window.getComputedStyle(elmTarget),
结果={
borderTopLeftRadius:styles.borderTopLeftRadius,
borderTopRightRadius:styles.borderTopRightRadius,
borderBottomLeftRadius:styles.borderBottomLeftRadius,
borderBottomRightRadius:样式。BorderBorderBottomRightRadius,
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(结果);
console.log(resultStr);
elmResult.innerHTML=resultStr;
});
})(窗口)
#目标{
背景颜色:蓝色;
宽度:100px;
高度:50px;
}

为什么
getComputedStyle()
在FF上返回空字符串而不是在Chrome中返回空字符串,这似乎与缺少Chrome实现的规范有关。更多信息,请访问以下链接:


@GibboK,同样:
borderLeftColor
等等。我正在写一个包含所有内容的片段。radius更加复杂(
borderTopLeftRadius
)感谢您的评论,我还添加了更多关于FF中为什么会出现这种行为的信息。
border-top-left-radius
border-top-right-radius
...