Question

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

$(target).css('background', $(source).css('background'));

在所有情况下，这在Chrome上运行良好，因为Chrome在返回计算的background属性时包含所有与背景相关的样式。现在我正在使脚本与Firefox兼容，这不再有效，因为Firefox似乎不会从其他与背景相关的样式中计算background。

考虑以下示例：

let test = $('#test');
let style = test[0].style;
let comp = window.getComputedStyle(test[0]);
let output = '';

output += `> ${test.css('background')}\n`;
output += `> ${style.getPropertyValue('background')}\n`;
output += `> ${comp.getPropertyValue('background')}\n`;
output += 'all background styles:\n';

for (key in comp)
  if (key.startsWith('background'))
    output += `${key} = ${comp.getPropertyValue(key)}\n`;
    
$('#output').val(output);

#test {
  background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg);
  background-position-x: 10px;
  background-position-y: -20px;
  background-color: black;
  width: 150px;
  height: 34px;
}

#output {
  width: 80ex;
  height: 30ex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
<textarea id="output"></textarea>

在Chrome（58，Windows）上运行时，输出为：

> 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 = 
backgroundBlendMode = 
backgroundClip = 
backgroundColor = 
backgroundImage = 
backgroundOrigin = 
backgroundPosition = 
backgroundPositionX = 
backgroundPositionY = 
backgroundRepeat = 
backgroundRepeatX = 
backgroundRepeatY = 
backgroundSize =

但是，在Firefox（53，Windows）上运行时，输出为：

> 
> 
> 
all background styles:
background = 
backgroundAttachment = 
background-attachment = scroll
backgroundBlendMode = 
background-blend-mode = normal
backgroundClip = 
background-clip = border-box
backgroundColor = 
background-color = rgb(0, 0, 0)
backgroundImage = 
background-image = url("https://cdn.sstatic.net/img/share-sprite-new.svg")
backgroundOrigin = 
background-origin = padding-box
backgroundPosition = 
background-position = 10px -20px
backgroundPositionX = 
background-position-x = 10px
backgroundPositionY = 
background-position-y = -20px
backgroundRepeat = 
background-repeat = repeat
backgroundSize = 
background-size = auto auto

有两个显着差异：

Firefox为计算的background返回一个空字符串（虽然奇怪的是，设法从其部分计算background-position），而Chrome则从所有其他背景属性构建它，并且
Firefox包含计算样式中每个项目的background-个形式及其显式值，而Chrome没有任何单个值。

我的问题是：是否有任何简单的方法来检索适用于Chrome和Firefox的元素的完整计算背景（或者，实际上，将一个元素的背景复制到另一个元素，这是我的最终目标）？ Chrome方法非常简单，但Firefox使事情复杂化。如果需要，可以使用jQuery。

Answer 1

这里的问题似乎是，以下确实有效：

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

而

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

不是。请注意，dasherized变量（ background-image ）是CSS属性名称，而较低的camelcase one（ backgroundImage ）是JavaScript命名。从getPropertyValue

开始，这种行为对我有意义

返回一个DOMString，其中包含指定 CSS属性的值。

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

我必须承认，我之前从未使用getPropertyValue。我总是通过

访问这些值

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

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

下面的代码片段在Firefox中返回以下内容（请注意，其中包含了dasherized和camelized variantes）：

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

这在Chrome中：

> 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

（我仅使用括号表示法getPropertyName(...)更改了[...]的使用，以支持访问权限。

＆＃13;

let test = $('#test');
let style = test[0].style;
let comp = window.getComputedStyle(test[0]);
let output = '';

output += `> ${test.css('background')}\n`;
output += `> ${style.getPropertyValue('background')}\n`;
output += `> ${comp.getPropertyValue('background')}\n`;
output += 'all background styles:\n';

for (key in comp)
  if (key.startsWith('background'))
    output += `${key} = ${comp[key]}\n`;
    
$('#output').val(output);

＆＃13;

#test {
  background-image: url(https://cdn.sstatic.net/img/share-sprite-new.svg);
  background-position-x: 10px;
  background-position-y: -20px;
  background-color: black;
  width: 150px;
  height: 34px;
}

#output {
  width: 80ex;
  height: 30ex;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"></div>
<textarea id="output"></textarea>

＆＃13;

在Firefox中获取计算背景样式

1 个答案: