Updating CSS via plain JavaScript... how do I update if the property uses vendor prefixes?

Question

For example, if I want a grabbing icon for my cursor, in CSS I would use this:

div {
     cursor: -moz-grabbing;
     cursor: -webkit-grabbing;
     cursor: grabbing;
    }

But let's say, I want to implement this via JavaScript but still being able to cover all three, how do I do this? Do I just assign them in three lines -- does JavaScript fallback to the previous assignment?

document.getElementById('theDiv').style.cursor = '-webkit-grabbing';
document.getElementById('theDiv').style.cursor = '-moz-grabbing';
document.getElementById('theDiv').style.cursor = 'grabbing';

this has nothing to do with `css3`. Edited. See my answer below — vsync, Nov 25 '14 at 19:19
Check this - http://stackoverflow.com/q/17487716/104380 and this http://davidwalsh.name/vendor-prefix. — vsync, Nov 25 '14 at 19:27
Naeem-Shaikh's solution is the best, IMO, but you can als use the `cssText` property: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration — Curtis Mattoon, Nov 25 '14 at 19:16

Naeem Shaikh · Accepted Answer · 2015-03-20T08:13:47.163

1) You can add a class for that purpose which assigns all the properties.

2) If you try it your way then, Javascript will reassign the property 3 times and end up with the last one executed as the active one, So

    document.getElementById('theDiv').style.cursor = '-webkit-grabbing';
    document.getElementById('theDiv').style.cursor = '-moz-grabbing';
    document.getElementById('theDiv').style.cursor = 'grabbing';

will not work.

3) Adding a class would do it. for example:

    css:-
    .myClass {
      cursor: -moz-grabbing; 
      cursor: -webkit-grabbing; 
      cursor: grabbing; 
     }

and

   js:-

   document.getElementById('theDiv').className += 'myClass';

Good point actually, you can have something like this: `.myClass { cursor: -moz-grabbing; cursor: -webkit-grabbing; cursor: grabbing; }` Then in your JS: `document.getElementById('theDiv').className += 'myClass';` — Alexus, Nov 25 '14 at 19:12

score 2 · Answer 2 · answered Nov 25 '14 at 19:11

No, Javascript will reassign the property 3 times and end up with the last one executed as the active one.

What you want is to detect which browser you are using with javascript and then apply the appropriate one.

In the end of the day your JS is executed on the user's specific machine with the specific browser so by detecting the browser and applying the appropriate style for that browser you solve your problem.

Pesudo Code:

if(isMozilla) {
    document.getElementById('theDiv').style.cursor = '-moz-grabbing';
}
else if(isChrome OR isSafari) {
    document.getElementById('theDiv').style.cursor = '-webkit-grabbing';
}
else {
    document.getElementById('theDiv').style.cursor = 'grabbing';
}

Wouldn't that be great if each vendor set a unique variable like isMozilla, so we don't have to deduce it. — technosaurus, Nov 25 '14 at 19:15

score 1 · Answer 3 · answered Nov 25 '14 at 19:34

Probably good to know in this regard: If you are trying to set an invalid value, the browser will ignore it. So something like this works:

function setStyle(element, property, value) {
    var prefix = ['', '-webkit-', '-moz-'];
    var i = 0;
    var style = element.style;
    do {
        style[property] = prefix[i] + value;
        i += 1;
    }
    while(style[property] !== prefix[i] + value && i < prefix.length);
}

Updating CSS via plain JavaScript... how do I update if the property uses vendor prefixes?

3 Answers3