Setting Multiple Style.background Values

I want to use gradients in my background and to be cross-platform I would like to set background with vendor prefixes: background: -webkit-linear-gradient(red, blue); background: -

Solution 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.

Solution 2:

I think just about your only real option is to clear the property, grab the value after clearing it, then repeatedly set it until it no longer has that value, like this:

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

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

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

    // Try prefixesfor (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");
}

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

Live Example | Source

---

Side note: I tested various versions of Chrome, Firefox, Opera, and IE. I didn't find a browser that appeared to support that linear-gradient value, but required a prefix. Recent Chrome and Firefox; Opera 12.15; and IE10 all support it without any prefix; Opera 10.62, IE8, and IE9 didn't support it either prefixed or not. (For IE8 and 9, I think you need to use a filter instead.)

Solution 3:

Sorry for previous post - misread the title~

You could refer to Prefixfree.js by Lea Verou to remove the usage of prefixing on vanilla CSS (and only declare your styles once)

Source: https://github.com/LeaVerou/prefixfree Site: http://leaverou.github.io/prefixfree/

Solution 4:

You will have to add only the prefix vendor used by your browser. An interesting method is explained here : http://davidwalsh.name/vendor-prefix

He use the x-tags library to define which property is used by the browser.