4

嗨，我想background-image使用 jquery 为所有浏览器设置：

background-image:linear-gradient(green, blue); /* Norme W3C */
background-image:-moz-linear-gradient(green, blue); /* Firefox */
background-image:-webkit-gradient(linear, green, blue); /* Chrome, Safari */
background-image:-o-linear-gradient(green, blue); /* Opera */
background-image:-ms-linear-gradient(green, blue); /* IE */

我这样设置：

$("#"+elmt).css("background-image" , "linear-gradient("+hex+","+$('#test2').val()+")" );

仅适用于 W3C，但它适用于 firefox，但不适用于 Chrome。

如何设置所有这些设置？

4

2 回答 2

5

来自 jQuery 1.8 博客的发布

自动 CSS 前缀：当您在 .css() 或 .animate() 中使用 CSS 属性时，我们将为该浏览器使用正确的前缀属性（如果合适）。例如取 .css("user-select", "none"); 在 Chrome/Safari 中，我们将值设置为“-webkit-user-select”，Firefox 将使用“-moz-user-select”，IE10 将使用“-ms-user-select”。

升级到最新版本，这应该会自动处理。

编辑

这应该会自动工作，以下应该在 jQuery 1.8 中实现，

var cssPrefixString = {};
var cssPrefix = function(propertie) {
    if (cssPrefixString[propertie] || cssPrefixString[propertie] === '') return cssPrefixString[propertie] + propertie;
    var e = document.createElement('div');
    var prefixes = ['', 'Moz', 'Webkit', 'O', 'ms', 'Khtml']; // Various supports...
    for (var i in prefixes) {
        if (typeof e.style[prefixes[i] + propertie] !== 'undefined') {
            cssPrefixString[propertie] = prefixes[i];
            return prefixes[i] + propertie;
        }
    }
    return false;
};

用途

var cssTransform = cssPrefix('Transform'); // "MozTransform" or "WebkitTransform"
if (cssTransform ) {
    var cssProp = {};
    cssProp['border'] = '1px solid rgba(0, 0, 0, .5)';
    cssProp[cssPrefix('Transform')] = 'rotate(20deg)';
    cssProp[cssPrefix('borderRadius')] = '5px'; // Keep the camelCaze (jQuery like)
    cssProp[cssPrefix('boxShadow')] = '2px 2px 6px grey';
    $('div#myDiv').css(cssProp);
    // console.log(cssProp);
}

来自链接——一个工作的jsFiddle

因此，这两种方法中的一种应该适合您。

于 2012-11-06T19:37:12.337 回答
1

您可以改为使用-prefix-free： http: //leaverou.github.com/prefixfree/

它会动态地将供应商前缀添加到您的 CSS 中。

于 2012-11-06T19:38:11.643 回答