William Troup
William Troup

Reputation: 13131

-ms-transform for IE9 in JavaScript

How do you set the property of a Div for "-ms-transform" in JavaScript?

I want to rotate a DIV like follows:

-ms-transform: rotate(30deg);

Any help would be great :)

Upvotes: 6

Views: 8712

Answers (3)

Paul Smart
Paul Smart

Reputation: 1

I've seen a few answers, including the two above, that don't seem to do anything... There's no console error, but when the page is loaded the element doesn't have -ms-transform in it's style attribute.

If you're having that problem, you can just hammer it through with setAttribute.

elementName.setAttribute("style", "-ms-transform: rotate(30deg)");

That will overwrite any other inline style elements, though.

If the other stuff is fixed, you can deal with that by just setting the whole style in the setAttribute command.

elementName.setAttribute("style", "position: absolute; width: 45%; -ms-transform: rotate(30deg)"); 

...or whatever other style elements it has.

If that won't work you'd either have to either abandon changing inline styles and instead change class (use setAttribute again) or (and this is messy, so I wouldn't do this unless you need to be able to change the rotate to some arbitrary value while the page is in use) do some tricky string manipulation. (Use get attribute to pull the style manipulate the string to contain the correct value for -ms-transform, and set then use setAttribute to set the style)

Upvotes: 0

hasser
hasser

Reputation: 1076

element.style['transform'] = 'rotate(30deg)';

element.style['msTransform'] = 'rotate(30deg)'; // IE
element.style['MozTransform'] = 'rotate(30deg)'; // Firefox
element.style['WebkitTransform'] = 'rotate(30deg)'; // Chrome
element.style['OTransform'] = 'rotate(30deg)'; // Opera

Here's an example: http://jsfiddle.net/mgWCm/

Upvotes: 2

BoltClock
BoltClock

Reputation: 723598

Try this:

document.getElementById('myDiv').style.msTransform = 'rotate(30deg)';

Upvotes: 11

Related Questions