设置CSS背景在Firefox中不起作用

Question

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

小提琴

在Chrome中工作得很好,在IE和FF中不起作用,我错过了什么？

Answer 1

从jQuery文档.css( propertyName ):

速记CSS属性的检索(例如,margin,background, border),虽然功能在一些浏览器,不能保证.

它看起来像在Firefox中使用window.getComputedStyle( element ),我相信jQuery 使用它来获取.css('property')[1],返回一个属性为空字符串的CSS2Properties集合background.但是,所有的更具体的背景相关的属性(如background-image,background-position等)的罚款.这也可能是其他简写属性相同,例如font是一个空字符串,同时font-family,font-size等有值.

您可以通过逐个克隆这些属性来修复它:

http://jsfiddle.net/ohvuLqwe/5/

$(function () {
    // get a reference to original element
    var original = document.querySelector('.one'); 
    // get the computed style
    var styleprops = getComputedStyle( original );
    // create an object to hold the relevant properties
    var clonebg = {};
    // iterate over the computed properties...
    for( var prop in styleprops ){
        // and store them in the object if they are not empty and the name starts with "background"
        if( prop.indexOf('background') == 0 && styleprops[prop] != "" ){
             clonebg[ prop ] =  styleprops[prop];
        }
    }
    // use the jQuery .css({}) method to set all the cloned properties.
    $('.two').css(clonebg );
});

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