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';

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

Naeem Shaikh · Accepted Answer · 2015-03-20 08:13:47Z

11

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';

edited Mar 20, 2015 at 8:13

answered Nov 25, 2014 at 19:10

Naeem Shaikh

15.8k8 gold badges53 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alexus Over a year ago

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 · Accepted Answer · 2014-11-25 19:11:40Z

2

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';
}

answered Nov 25, 2014 at 19:11

Alexus

9528 silver badges20 bronze badges

1 Comment

technosaurus Over a year ago

Wouldn't that be great if each vendor set a unique variable like isMozilla, so we don't have to deduce it.

Felix Kling · Accepted Answer · 2014-11-25 19:34:53Z

1

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

answered Nov 25, 2014 at 19:34

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related