javascript - set css background doesn't work in firefox -

javascript - set css background doesn't work in firefox -

$(function () { var getbg = $('.one').css('background'); $('.two').css('background', getbg); });

fiddle

worked in chrome, doesn't work in ie , ff, missing?

from jquery documentation on .css( propertyname ):

retrieval of shorthand css properties (e.g., margin, background, border), although functional browsers, not guaranteed.

it looks in firefox using window.getcomputedstyle( element ), believe used jquery under hood .css('property')[1], returns css2properties collection background property empty string. more specific background-related properties (like background-image, background-position etc) fine. it's same other shorthand properties, illustration font empty string while font-family, font-size etc. have values.

you can prepare cloning these properties 1 one:

http://jsfiddle.net/ohvulqwe/5/

$(function () { // reference original element var original = document.queryselector('.one'); // computed style var styleprops = getcomputedstyle( original ); // create object hold relevant properties var clonebg = {}; // iterate on computed properties... for( var prop in styleprops ){ // , store them in object if not empty , name starts "background" if( prop.indexof('background') == 0 && styleprops[prop] != "" ){ clonebg[ prop ] = styleprops[prop]; } } // utilize jquery .css({}) method set cloned properties. $('.two').css(clonebg ); });

[1] https://github.com/jquery/jquery/blob/master/src/css/var/getstyles.js

javascript jquery css css3