JavaScript: Changing a CSS class

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.

1-javascript-change-css-class

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.

2-javascript-change-css-class

Leave a Reply

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

WordPress.com Logo

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

Google+ photo

You are commenting using your Google+ 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