Setting multiple style.background values

Question

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: -o-linear-gradient(red, blue);
background: -moz-linear-gradient(red, blue);
background: linear-gradient(red, blue);

How can I set multiple style.background's on a HTMLElement, using Javascript to support the vendor prefixes?

Update: I wish not to use jQuery or any other external library.

possible duplicate of [Using JavaScript to edit CSS gradient](http://stackoverflow.com/questions/15071062/using-javascript-to-edit-css-gradient) — Aditya Singh, Mar 07 '14 at 08:30
Always put all of the relevant information **in** your question. Right now, your question is unclear unless someone clicks through to the w3schools site. That's not how it's done here on SO. Links rot. — T.J. Crowder, Mar 07 '14 at 08:30
@wizkid Not a dup. This asks about vendor prefixes, the gradient was just an example. — bjb568, Mar 07 '14 at 08:32

Aurelio · Answer 1 · 2015-06-15T14:45:05.200

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.

score 1 · Answer 2 · answered Mar 07 '14 at 08:37

1

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/

answered Mar 07 '14 at 08:37

Denis Tsoi

9,428
8
37
56

Please see update, I wish not to use any external libraries for this. – HischT Mar 07 '14 at 08:38
To my knowledge, without doing something like `document.querySelector("body").style.backgroundColor="-webkit-linear-gradient(red, blue)";` and iterate through your prefixes **Caveat** Remember that gradients have to use the ms-filter css property for IE8 and below – Denis Tsoi Mar 07 '14 at 09:05

score 1 · Accepted Answer · answered Mar 07 '14 at 09:37

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:

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

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

Thanks, it works! Old versions of Safari (as in old iPhones) require -webkit- prefix according to my testing. — HischT, Mar 07 '14 at 10:20

ylerjen · Answer 4 · 2014-03-07T08:47:52.153

0

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.

edited Mar 07 '14 at 08:47

answered Mar 07 '14 at 08:32

ylerjen

4,109
2
25
43

2

Please provide more than a link, as links can break. – bjb568 Mar 07 '14 at 08:33
http://meta.stackexchange.com/questions/8231/are-answers-that-just-contain-links-elsewhere-really-good-answers – T.J. Crowder Mar 07 '14 at 08:35
I'm aware that posting a link is not a good way to answer but because I haven't coded personnaly this possibility, just copying the code of another developer was for me a worse approach than refering a link to his solution... Anyway, as HischT updated his question, he don't want to use a library. My answer is then no more usefull for him. – ylerjen Mar 07 '14 at 08:45

Setting multiple style.background values

4 Answers4

Linked

Related