Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

changing browser specific CSS3 (prefix) properties in JavaScript

changing browser specific CSS3 (prefix) properties in JavaScript

Problem

So I'm trying to dynamically change the style of a div with javascript, which is normally no big deal except that I'm trying to change some CSS3 properties which have a prefix, i.e. minus (-) in the name... and of course, that means something else entirely in javascript...

so I've got this going on in my javascript:

r += 1;
document.getElementById('someDiv').style.transform = "rotate(" + r + "deg)";

and my div's style property looks like this:

transform: rotate(30deg);
-ms-transform: rotate(30deg); /* IE 9 */
-webkit-transform: rotate(50deg); /* Safari and Chrome */
-o-transform: rotate(30deg); /* Opera */
-moz-transform: rotate(30deg); /* Firefox */

so that javascript works fine to change the "transform" property, but how would I change the rest of them? because doing something like this won't work:

document.getElementById('someDiv').style.-ms-transform = "rotate(" + r + "deg)";

because the javascript reads the "-" as syntax error :(

thoughts?

Problem courtesy of: Nick

Solution

Instead of the -, make the next letter uppercase: style.MozTransform.
(just like style.backgroundColor)

Note that IE incorrectly uses msTransform with a lowercase m.

Solution courtesy of: SLaks

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

changing browser specific CSS3 (prefix) properties in JavaScript

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×