Help to get style element by javascript

Hey. Here my problem:

i have to tranfer an style element (rotation, like: -moz-transform:rotate(20deg)) to an input field.

I allready done some functions for the positions like:

make the style element to a js variable

put the variable into an input field (infos = form name; pos_x = input field name)

but how i can get the rotate value to an js variable -> input field??

cause js willn’t do this:

i tried var rot = document.getElementById(id).style.transformRotate; but thats not correctly. so some javascript gurus (or just smarter people as me) here to help me?

Hi,

For mozilla its:

document.getElementById(id).style.MozTransform = ‘rotate(20deg)’;

and webkit browsers:

document.getElementById(id).style.webkitTransform = ‘rotate(20deg)’;

But be aware that this is not cross browser supported, currently it is only newer versions of mozilla and webkit browsers that support this, older versions without css3 won’t.

Also although I haven’t tested it may cause issues with passwords/text selection etc

Thank for your reply. I didn’t tested it yet, but i’, sure this will work.

I use nut just the Mozilla Version, i use this 4 versions:

-o-transform:rotate(20deg)

-ms-transform:rotate(20deg)

-webkit-transform:rotate(20deg)

-moz-transform:rotate(20deg)

there is an another one for old IE browsers: filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1.5)

but i did’t tested it fow now cause i can’t understand what rotate=1,5 is?? 120 degree = 1.5 ??? i don’t know how to calculate from 120degrees to 1.5

o-transform:rotate(20deg)    <--  OTransform = ‘rotate(20deg)';

-ms-transform:rotate(20deg)  <-- msTransform = 'rotate(20deg)';

Its only IE 9 that supports rotation through this method though. The other MS method you mention for older IE browsers is based on a matrix I think so is alot more complex.

the rotation istn’t very important if some visitor has an old browser and can’t see the rotation.. so i will use just the opera, mozilla, webkit and the newer IE. my problem was just how to edit the rotaion via javascript.. and u showed me how =)

eeem okay, that didn’t work… you showed me how to edit it, but how can i get the degree value to an input field or just an variable???

var rotation = document.getElementById(id).style.MozTransform equals undefined!

What browser are you testing that in. I know it sounds obvious but that will be undefined in any browser other then firefox/mozilla

that sounds really obvious xD okay that works if i work with Opera and use the OTransform… i have to see how to handle it cross brower supported.. i know into HTML you can ask something like <!—[if IE 6 ]>... maybe this works into Javascript too..

No just test whether its undefined.

So for mozilla you would say:

if(document.getElementById(id).style.MozTransform != “undefined”){ var rotation = document.getElementById(id).style.MozTransform }

Just wanted to mention that style attributes like -moz-transform equal to MozTransform in JavaScript. The – is removed, and the first character thereafter is capitalized.

So “background-color” become “backgroundColor”.