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

Question

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

小提琴

在Chrome中運作良好，在IE和FF中無法運作，我缺少什么？

Answer 1

從.css( propertyName )的jQuery文檔中：

速記CSS屬性（例如margin ， background ， border ）的檢索盡管可以在某些瀏覽器中使用，但不能保證。

看起來像在Firefox中使用window.getComputedStyle( element ) ，我相信jQuery在CSS2Properties使用它來獲取.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

Answer 2

使用“背景圖像”獲取圖像

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

小提琴

Answer 3

嘗試使用background-image屬性

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

小提琴

Answer 4

嘗試

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