Javascript 在Firefox中获取计算背景样式

在一个以前只在Chrome上工作的用户脚本中，我将整个背景（完全未知，可能是图像、颜色或任何东西）从一个元素复制到另一个元素，如下所示：

$（target.css（'background'，$（source.css（'background'））；

在所有情况下，这在Chrome上都非常有效，因为Chrome在返回计算的

background

属性时包含所有与背景相关的样式。现在，我正在使脚本与Firefox兼容，但这不再有效，因为Firefox似乎无法从其他与背景相关的样式计算

background

考虑以下示例：

let test=$（'#test'）；
让style=test[0]。style；
设comp=window.getComputedStyle（测试[0]）；
让输出=“”；
输出+=`>${test.css（'background'）}\n`；
输出+=`>${style.getPropertyValue（'background'）}\n`；
输出+=`>${comp.getPropertyValue（'background'）}\n`；
输出+='所有背景样式：\n'；
用于（输入comp）
if（key.startsWith（'background'））
输出+=`${key}=${comp.getPropertyValue（key）}\n`；
$（'#output'）.val（output）
#测试{
背景图片：url(https://cdn.sstatic.net/img/share-sprite-new.svg);
背景位置x:10px；
背景位置y:-20px；
背景色：黑色；
宽度：150px；
高度：34px；
}
#输出{
宽度：80ex；
高度：30ex；
}
这里的问题似乎是，以下各项确实有效：

window.getComputedStyle(...).getPropertyValue('background-image')

当

window.getComputedStyle(...).getPropertyValue('backgroundImage')

事实并非如此。请注意，dasherized变量（backgroundImage）是CSS属性名，小写的变量（backgroundImage）是JavaScript命名。
这种行为对我来说是有道理的，因为

返回包含指定CSS属性值的DOMString

然而，带破折号的名称似乎只在Firefox中返回，因此您观察到，在Chrome中似乎只有计算出的速记值

我必须承认，我以前从未使用过
getPropertyValue
。例如，我总是访问这些值

window.getComputedStyle(...)['backgroundImage']

这在两种浏览器中似乎都能正常工作。然而，输出仍然存在差异。但这不是代码的问题，而是浏览器为您提供计算值的方式的问题

以下代码段在Firefox中返回以下内容（注意，这里有dasherized和camelized变量）：

#测试{
背景图片：url(https://cdn.sstatic.net/img/share-sprite-new.svg);
背景位置x:10px；
背景位置y:-20px；
背景色：黑色；
宽度：150px；
高度：34px；
}
#输出{
宽度：80ex；
高度：30ex；
}
我想说的是，这是一个骗局，但它看起来像是一个特定的案例，可能会从它自己的问题线索中受益。
all background styles:
background = 
backgroundAttachment = scroll
background-attachment = scroll
backgroundClip = border-box
background-clip = border-box
backgroundColor = rgb(0, 0, 0)
background-color = rgb(0, 0, 0)
backgroundImage = url("https://cdn.sstatic.net/img/share-sprite-new.svg")
background-image = url("https://cdn.sstatic.net/img/share-sprite-new.svg")
backgroundBlendMode = normal
background-blend-mode = normal
backgroundOrigin = padding-box
background-origin = padding-box
backgroundPosition = 0% 0%
background-position = 0% 0%
backgroundRepeat = repeat
background-repeat = repeat
backgroundSize = auto auto
background-size = auto auto
> rgb(0, 0, 0) url("https://cdn.sstatic.net/img/share-sprite-new.svg") repeat scroll 10px -20px / auto padding-box border-box
> 
> rgb(0, 0, 0) url("https://cdn.sstatic.net/img/share-sprite-new.svg") repeat scroll 10px -20px / auto padding-box border-box
all background styles:
background = rgb(0, 0, 0) url("https://cdn.sstatic.net/img/share-sprite-new.svg") repeat scroll 10px -20px / auto padding-box border-box
backgroundAttachment = scroll
backgroundBlendMode = normal
backgroundClip = border-box
backgroundColor = rgb(0, 0, 0)
backgroundImage = url("https://cdn.sstatic.net/img/share-sprite-new.svg")
backgroundOrigin = padding-box
backgroundPosition = 10px -20px
backgroundPositionX = 10px
backgroundPositionY = -20px
backgroundRepeat = repeat
backgroundRepeatX = 
backgroundRepeatY = 
backgroundSize = auto