Jump to content

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


ekuemoah

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

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...