Please see my other JavaScript articles.

Using JavaScript to dynamically change a control’s CSS class.

Using the DOM, JavaScript provides developers the options of dynamically modifying properties of HTML controls residing within the page.
In this example, I will illustrate how to access a series of image buttons to change their CSS class in order to reflect the currently selected button.

First, I’ll begin with a series of html buttons which display images using the CSS background property.
Notice I’ve wired each button to call “changeBtnClass()” and passes to it the current button’s ID and number of buttons displayed.

Next, I wrote the corresponding JavaScript button to receive the arguments.
Its first task is to loop through all the buttons to change their CSS class to reflect an “off” state.
Then using the ID passed of the currently selected button, if accesses just that button and changes its CSS class to change it back to an “on” state.