JavaScript: Changing a CSS class

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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s