changing browser specific CSS3 (prefix) properties in JavaScript

Question

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?

SLaks · Accepted Answer · 2012-02-01 22:48:13Z

6

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

Note that IE incorrectly uses msTransform with a lowercase m.

edited Feb 1, 2012 at 22:48

answered Feb 1, 2012 at 22:39

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

3 Comments

Niet the Dark Absol Over a year ago

Actually, I believe it is msTransform.

Niet the Dark Absol Over a year ago

Well given that document.body.style.MsTransform is undefined and document.body.style.msTransform is an empty string, I'd have to say I'm right here.

Nick Briz Over a year ago

Ah yes, Awesome! Thanks so much! I haven't tried on IE or Opera, but this seems to work great on Chrome, Safari, and FireFox :)

dmidz · Accepted Answer · 2012-02-01 22:41:07Z

2

In javascript you can access object property trought two ways : dot notation or array notation. In particular when you have special chars in the property name, use array notation :

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

Then you need to insure that the property is right for the browser, I strongly recommend you to use a javascript lib like jQuery, Mootools, etc if you wana win some time and prevent some frustration that web developpers had before these great tools...

answered Feb 1, 2012 at 22:41

dmidz

8967 silver badges20 bronze badges

1 Comment

SLaks Over a year ago

Because the Javascript property is called msTransform. That will create a new property that the browser will ignore.

atrueresistance · Accepted Answer · 2012-02-01 22:41:07Z

2

Use jquery and just change classes

 $("p").removeClass("myClass noClass").addClass("yourClass");

answered Feb 1, 2012 at 22:41

atrueresistance

1,3685 gold badges26 silver badges48 bronze badges

1 Comment

skybondsor Over a year ago

I wish I could up this twice!

kennebec · Accepted Answer · 2012-02-02 00:17:35Z

1

If you already have the style inline you can ignore the prefix and change the degrees. An element's style.cssText is read and writable.

var sty=document.getElementById('someDiv').style;

sty.cssText= sty.cssText.replace(/rotate\([^)]+/,'rotate(30');

answered Feb 2, 2012 at 0:17

kennebec

105k32 gold badges109 silver badges127 bronze badges

Collectives™ on Stack Overflow

changing browser specific CSS3 (prefix) properties in JavaScript

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related