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


Tags: javascript,css,vendor-prefix

Problem :

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


Solution :

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

    CSS Howto..

    Hovering over a container div shows hidden div. When cursor is put over hidden div, behavior of container div changes

    CSS: How to prevent contents of scrollable div from appearing behind a fixed div

    How to make padding:auto work in CSS?

    CSS- How to create child menu towards leftern side

    How to find unused CSS from rails? deadweight not working [closed]

    How can I manage css and php gd2 font size?

    how to add more specificity to css class .background-color-blue so it overrides default div's background color

    How do I resize an image in IE 8

    How to customize Twitter Bootstrap from Illustrator design

    How to display background-image on entire site

    How to extend a wrapped element background both left and right with different color?

    How to get an li to expand to fit thumbnail content?

    How to include php page which include also a css file?

    HTML: How to change the width of input field based on container size

    How can I write a complex fraction using HTML/CSS/jQuery?

    How to create DRY CSS when using transform & keyframes

    How to remove excess space added with \n

    How do you set background-color rgba on the body with background-image also?

    FontAwesome icon showing as black box. What CSS is needed to display icon?

    How to edit WordPress CSS written as inline CSS? [duplicate]

    How do I get this ul li dropdown menu to show on hover with jquery or javascript?

    How can I customize COUNT nodes with css

    How to read different CSS classes with the same beginning with jquery?

    CSS: How to change background color [closed]

    How do I use Stylish to change the font in Google Tasks?

    how to make css for work for different mobile sites

    How to place an image and text under it, side by side using HTML and css?

    How to cancel CSS effect in Responsive Website Footer menu?

    How to keep symmetry with CSS fluid spacing of dynamic content

    how to prevent shifting when changing border width