Question

我想在我的背景中使用渐变，并且要跨平台我想设置供应商前缀的背景：

background: -webkit-linear-gradient(red, blue);
background: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);

如何在style.background上设置多个HTMLElement，使用Javascript支持供应商前缀？

更新：我希望不使用jQuery或任何其他外部库。

Answer 1

Another way is to set your props via the style attribute

 var styleText = '-webkit-linear-gradient(red, blue); ' +  
                 '-o-linear-gradient(red, blue); ' +
                'linear-gradient(red, blue);'

 el.setAttribute('style', styleText);

If you think you risk overriding any other styles already set inline you will want to get the current styles and then add the new ones on top:

var el = document.getElementById('myEl'),
    currentStyle = el.getAttribute('style'),
    styleText =  'background: -webkit-linear-gradient(top, red 0%,blue 100%); ' +  
                 'background: -o-linear-gradient(top, red 0%,blue 100%); ' +
                 'background: -ms-linear-gradient(top, red 0%,#blue 100%);' +
                 'background: linear-gradient(to bottom, red 0%, blue 100%);';


 el.setAttribute('style', currentStyle + styleText);

Here's a bin with an example.

Answer 2

对不起以前的帖子 - 误读标题〜

你可以参考Lea Verou的Prefixfree.js来删除在vanilla CSS上使用前缀的用法（并且只声明你的样式一次）

来源：https://github.com/LeaVerou/prefixfree
网站：http://leaverou.github.io/prefixfree/

Answer 3

我认为你唯一真正的选择就是清除属性，清除它后获取值，然后反复设置它直到它不再具有该值，如下所示：

function setPrefixedValue(elm, prop, value) {
    var prefixes = ['-moz-', '-webkit-', '-o-', '-ms-', '-khtml-'];
    var i, v, starting;

    // Clear
    elm.style[prop] = "";
    starting = elm.style[prop];

    // Try raw first
    try {
        elm.style[prop] = value;
        if (elm.style[prop] !== starting) {
            console.log("No prefix");
            return;
        }
    }
    catch (e) {
    }

    // Try prefixes
    for (i = 0; i < prefixes.length; ++i) {
        v = prefixes[i] + value;
        try {
            elm.style[prop] = v;
            if (elm.style[prop] !== starting) {
                console.log("Prefix: " + prefixes[i]);
                return;
            }
        }
        catch (e2) {
        }
    }

    console.log("Didn't find prefix");
}

// Usage
setPrefixedValue(someElement, "background", "linear-gradient(red, blue)");

Live Example | Source

旁注：我测试了各种版本的Chrome，Firefox，Opera和IE。我没有找到似乎支持linear-gradient值的浏览器，但需要一个前缀。最近的Chrome和Firefox;歌剧12.15;和IE10都支持它没有任何前缀; Opera 10.62，IE8和IE9不支持前缀或不支持。（对于IE8和9，我认为你需要使用过滤器。）

Answer 4

您只需添加浏览器使用的前缀供应商。这里解释了一个有趣的方法： http://davidwalsh.name/vendor-prefix

他使用x-tags library来定义浏览器使用的属性。

设置多个style.background值

4 个答案: