在jQuery中为背景渐变设置-os-/-ms前缀无法正常工作?

问题描述

关于jQuery .css()不能与-webkit-gradient一起使用，我在这里还看到了其他几篇文章，但是我还没有找到与-ms-linear-gradient，-o-linear-gradient和linear-gradient有关的文章.

I've seen a couple of other posts on here in regards to jQuery .css() not working with -webkit-gradient, however I've yet to find one pertaining to -ms-linear-gradient, -o-linear-gradient and linear-gradient.

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

Long story short, I've created a function which sets a #hex based background gradient for an element using the all the most popular CSS properties for cross-browser compatibility, taken directly from 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 )'
        });

我在每个属性旁边放置了//breaks execution注释，这些属性在活动时(集体或单独)会破坏脚本的执行(没有其他属性，例如background: b(b当然是变量) )设置.

I've placed a //breaks execution comment next to each of the properties that when active (either collectively, or individually) break the script's execution (no other properties, e.g. background: b (b of course being a variable) are set.

我绝对对为什么会这样感到困惑.

I'm absolutely stumped as to why this is.

到目前为止，我已经尝试过:

• 使用双引号而不是单引号.
• 用实际的十六进制替换变量用法(+a+，+b+).

• Using double quotes instead of single quotes.
• Replacing the variable usage (+a+, +b+) with actual hex's.

我在想这三个角色中可能有一个需要逃脱的角色或其他东西吗?

I'm thinking perhaps there's a character in those three that needs to be escaped or something?

对于弄清为什么会出现的任何帮助将不胜感激！

Any help towards figuring out why this is would be greatly appreciated!

推荐答案

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

You're setting and re-setting the background property of the JavaScript object again and again.

最后，如果您尝试记录传递给.css()的对象，则会看到它仅包含2个属性:列表中的最后一个background值和filter.

In the end, if you try logging the object you're passing to .css(), you'll see it only contains 2 properties: The last background value in the list, and filter.

因此您的代码等同于:

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

您可以尝试使用类似的方法( jsfiddle演示):

You can try something like this instead (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 )"
});

这段代码当然根本不是很有效.对于了解不止一种声明的浏览器，它将毫无意义地覆盖已经可用的声明.因此，请根据需要进行优化.

This code is of course not very efficient at all. And for browsers that understand more than one of the declarations, it'll pointlessly overwrite those that work already. So optimize as you see fit.

这篇关于在jQuery中为背景渐变设置-os-/-ms前缀无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！