Jump to content

How to change the style(CSS3) feature using HTML DOM and Javascript?


ekuemoah
 Share

Recommended Posts

I read about CSS3 transformations a few days ago. I want to use javascript to access this style property and change the value of it when the user clicks a button.<div id="div1" name="div1" style="transform: rotate(30deg);width: 50px;height: 50px;background-color: orange"</div>I want to use this formula to rdocument.getElementById('div1').style.transform ='rotate(30deg')'Is the above the correct way to access the the element?How do I write it for a chrome or Firefox 4.0 browser, which requires that you add a prefix like -webkit or -moz- before the property?Ex. -moz-transform: rotate(30deg)Do I write it like this document.getElementById('div1').style.mozTransform='rotate(30deg)'How do I write it?

Link to comment
Share on other sites

This:document.getElementById('div1').style.transform ='rotate(30deg')';would be the correct way to write it when all major browsers support the transform property. (Or at least it should be :) )You're close with Mozilla's. You just need to capitalize the 'M'document.getElementById('div1').style.MozTransform='rotate(30deg)';I am not sure how webkit's is done. It might be webkitTransform or WebkitTransform or maybe just transform will work. I'm not sure.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...