Reputation: 13131
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
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
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
Reputation: 723598
Try this:
document.getElementById('myDiv').style.msTransform = 'rotate(30deg)';
Upvotes: 11