Changing a Element's Style with JavaScript

This page shows a example of how to change a element's style with JavaScript. Press the following buttons to change the background color. Red me Yellow me

If you look at the source code, you can see that it is done by using “myObj=document.getElementById”. Then, using “myObject.style.backgroundColor="red"”. All other elements of CSS style can also be changed this way. For example, a element position, width, color, margin, alignment... anything that's defined in CSS.

For a more complex application of changing CSS style to achieve a following menu, see Animated Moving Block.

See also:

• What's New in CSS2
• Changing HTML Content using JavaScript
• Adding HTML Content with JavaScript
• Implementing Tabs in Web Design

Page created: 2006-02.
© 2006 by Xah Lee.