设置多个style.background值

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在a上设置多个HTMLElement,使用Javascript来支持供应商前缀？

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

Answer 1

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

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

实例| 来源

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