在Firefox中获取计算的背景样式 [英] Getting computed background style in Firefox

问题描述

在以前只能在Chrome上运行的用户脚本中，我将整个背景(完全未知，可能是图像，颜色或其他任何东西)从一个元素复制到了另一个，例如:

In a userscript that previously only worked on Chrome, I was copying the entire background (completely unknown, could be an image, color, anything) from one element to another, like so:

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

这在所有情况下都适用于Chrome，因为在返回计算出的 background 属性时，Chrome包含了所有与背景相关的样式.现在，我使脚本与Firefox兼容，并且不再起作用，因为Firefox似乎无法从其他与背景相关的样式中计算 background .

This worked great, on Chrome, in all cases, because Chrome includes all background-related styles when returning a computed background property. Now I'm making the script compatible with Firefox, and this no longer works, as Firefox doesn't seem to compute background from other background-related styles.

请考虑以下示例:

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)上运行时，输出为:

When run on Chrome (58, Windows), the output is:

> 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)上运行时，输出为:

However, when run on Firefox (53, Windows), the output is:

> 
> 
> 
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

有两个重大区别:

1. Firefox为计算出的 background 返回一个空字符串(尽管奇怪的是，它设法从其各个部分计算出 background-position )，而Chrome则是从所有其他背景构建的属性，以及
2. Firefox在计算样式中包括每个项目的 background-形式及其显式值，而Chrome没有任何单独的值.

1. Firefox returns an empty string for computed background (although, oddly, manages to compute background-position from its parts), whereas Chrome builds it from all the other background properties, and
2. Firefox includes background- forms of each item in the computed style with their explicit values, whereas Chrome does not have any of the individual values.

我的问题是:是否有任何简单的方法来检索在Chrome和Firefox上均可使用的元素的完整计算背景(或者，实际上，将一个元素的背景复制到另一个元素，这是我的最终目标)?Chrome方法非常简单，但是Firefox使事情变得复杂.必要时可以使用jQuery.

My question is: Is there any simple way to retrieve the full computed background of an element that works on both Chrome and Firefox (or, really, to copy the background of one element to another, which is my end goal)? The Chrome method is very straightforward, but Firefox complicates things. jQuery is available if needed.

推荐答案

这里的问题似乎是，以下内容确实有效:

The problem here seems to be, that the following is indeed working:

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

同时

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

不是.请注意，反斜线变体( background-image )是CSS属性名称，而小驼峰( backgroundImage )是JavaScript命名.由于 getPropertyValue

is not. Note that the dasherized variant (background-image) is the CSS property name and the lower camelcase one (backgroundImage) is the JavaScript naming. This behaviour makes sense to me, since getPropertyValue

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

returns a DOMString containing the value of a specified CSS property.

但是，带有短划线的名称似乎仅在Firefox中返回，因此您发现在Chrome中似乎只有计算出的速记值.

However, the name with dashes seems to be only returned in Firefox, hence your observation that in Chrome there seems to be only the computed shorthand value.

我必须承认，我以前从未使用过 getPropertyValue .我总是通过以下方式访问此类值:

I must admit, I never used getPropertyValue before. I always accessed such values for instance by

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

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

which seems to work fine in both browsers. However, there's still differences in the output. But that's not a problem with the code but with the way the browser provides you with the computed values.

下面的代码段在Firefox中返回以下内容(请注意，这里有经过反斜线和驼色表示的变体):

The below snippet returns the following in Firefox (note that there's the dasherized and 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(...)的用法，以使用方括号表示法 [...] 进行访问)

(I only changed your usage of getPropertyName(...) in favor of the access using the bracket notation [...])

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

#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>

这篇关于在Firefox中获取计算的背景样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！