Getting computed background style in Firefox

Question

In a user document that previously worked only in Chrome, I copied the entire background (completely unknown, maybe an image, color, whatever) from one element to another, for example:

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

In most cases, this worked fine in Chrome, as all background-related styles were included in Chrome when returning the computed property background. Now I am making the script compatible with Firefox, and this no longer works, since Firefox does not seem to calculate backgroundfrom other background-related styles.

Consider the following example:

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>

Run code

When launched in 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 = 

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

There are two significant differences:

• Firefox background (, , background-position ), Chrome
• Firefox background- , Chrome - .

: , Chrome, Firefox (, , , )? Chrome , Firefox . jQuery.

Answer 1

, :

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

while

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

. , dasherized variant (background-image) - CSS, camelcase (backgroundImage) - JavaScript. , getPropertyValue

DOMString, CSS.

, , Firefox, , Chrome, , .

, getPropertyValue. , ,

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

, , . . , , .

Firefox ( , "dasherized and camelized" ):

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(...) , [...])

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>