在 jQuery 中设置背景渐变的 -os-/-ms 前缀失败？

我在这里看到了一些关于 jQuery 的其他帖子.css()不与-webkit-gradient，但是我还没有找到一个与-ms-linear-gradient, -o-linear-gradient and linear-gradient.

长话短说，我创建了一个函数来设置#hex基于元素的背景渐变，使用所有最流行的 CSS 属性来实现跨浏览器兼容性，直接取自彩色齐拉.

看一下我正在谈论的特定片段：

$(elem).css({
        'background': b,
        'background': '-moz-linear-gradient(top,  '+a+' 0%, '+b+' 100%)', 
        'background': '-webkit-gradient(linear, left top, left bottom, color-stop(0%,'+a+'), color-stop(100%,'+b+'))',
        'background': '-webkit-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
        'background': '-o-linear-gradient(top,  '+a+' 0%,'+b+' 100%)', // Breaks execution
        'background': '-ms-linear-gradient(top,  '+a+' 0%,'+b+' 100%)', // Breaks execution
        'background': 'linear-gradient(top,  '+a+' 0%,'+b+' 100%)', // Breaks execution
        'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\''+a+'\', endColorstr=\''+b+'\',GradientType=0 )'
        });

我已经放置了一个//breaks execution每个属性旁边的注释在活动时（集体或单独）会中断脚本的执行（没有其他属性，例如background: b (b当然是一个变量）被设置。

我完全不明白为什么会这样。

到目前为止我已经尝试过：

• 使用双引号代替单引号。
• 替换变量用法（+a+, +b+）与实际的十六进制。

我在想也许这三个角色中有一个需要逃脱或者什么？

任何有助于找出原因的帮助将不胜感激！

您正在设置并重新设置backgroundJavaScript 对象的属性一次又一次。

最后，如果您尝试记录要传递给的对象.css()，你会看到它只包含 2 个属性：最后一个background列表中的值，以及filter.

所以你的代码相当于：

$(elem).css({
    'background': 'linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    'filter': 'progid:DXImageTransform.Microsoft.gradient( startColorstr=\''+a+'\', endColorstr=\''+b+'\',GradientType=0 )'
});

你可以尝试这样的事情（jsfiddle 演示):

var i, l, backgrounds = [
    '-moz-linear-gradient(top,  '+a+' 0%, '+b+' 100%)', 
    '-webkit-gradient(linear, left top, left bottom, color-stop(0%,'+a+'), color-stop(100%,'+b+'))',
    '-webkit-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    '-o-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    '-ms-linear-gradient(top,  '+a+' 0%,'+b+' 100%)',
    'linear-gradient(top,  '+a+' 0%,'+b+' 100%)'
];

// Try each background declaration, one at a time
// Like in a stylesheet, the browser should(!) ignore those
// it doesn't understand.
for( i = 0, l = backgrounds.length ; i < l ; i++ ) {
    $(elem).css({ background: backgrounds[i] });
}

$(elem).css({
    'filter': "progid:DXImageTransform.Microsoft.gradient( startColorstr='"+a+"', endColorstr='"+b+"',GradientType=0 )"
});

这段代码当然效率不高。对于理解多个声明的浏览器，它将毫无意义地覆盖那些已经起作用的声明。因此，请根据您认为合适的方式进行优化。