Back when my userscript was only functional on Chrome, I had a setup where I could copy the entire background (which could be anything from an image to a color) from one element to another. This is how it looked:
$(target).css('background', $(source).css('background'));
This method worked flawlessly on Chrome in all scenarios because Chrome would consider all background-related styles when computing the background property. However, now that I am expanding compatibility to Firefox, this approach no longer functions as expected; Firefox does not seem to compute background based on other background-related styles.
Let's examine 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>Running this code on Chrome version 58 for Windows produces the following output:
> 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, running the same code on Firefox version 53 for Windows results in:
>
>
>
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
Two main differences stand out:
- Firefox returns an empty string for computed
background(still somehow manages to calculatebackground-positionfrom its components), whereas Chrome constructs it from all other background properties, and - Firefox includes
background-variations of each item in the computed style with their specific values, while Chrome does not show individual values.
My query is: Is there a simple yet effective way to obtain the complete computed background of an element that works seamlessly across both Chrome and Firefox (or simply to replicate the background of one element onto another, which is my ultimate goal)? The straightforward Chrome method has become entangled due to Firefox's intricacies. jQuery can be utilized if necessary.