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

Question

我在这里看到了一些关于 jQuery .css() 不能与 -webkit-gradient 一起使用的其他帖子，但是我还没有找到相关的帖子到-ms-线性梯度、-o-线性梯度和线性梯度。

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

下面是我正在讨论的特定代码片段：

$(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 )'
        });

我在每个处于活动状态的属性旁边放置了一个 //breaksexecution 注释（或者统称为或单独）中断脚本的执行（没有设置其他属性，例如 background: b （b 当然是一个变量）。

我绝对不明白为什么会这样 。

是的 尝试：

• 使用双引号而不是单引号
• 替换变量用法（+a+，+b+）

我想也许有一个 。这三个角色中需要转义的角色或其他什么？

任何有助于弄清楚为什么会这样的帮助将不胜感激！

Answer 1

您一次又一次地设置和重新设置 JavaScript 对象的 background 属性。

最后，如果您尝试记录传递给 .css() 的对象，您会发现它只包含 2 个属性：最后一个 background 值列表和过滤器。

所以你的代码相当于：

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

你可以尝试这样的东西（jsfiddle demo）：

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 )"
});

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