Toggle Background Color using Javascript

This is a simple javascript function I made to toggle the background color of any element that can have a background color. In order for it to work properly, the element has to start out with no background color specified. This javascript function works great by itself or it can be applied to elements using unobtrusive javascript methods as described in my article, Unobtrusive Javascript made easy. To use the function just put the color you want the background to toggle to in place of #FFFF00 in the function. Then for any element you can either set an onclick, onmouseover, onmouseout, or other javascript event to call toggleBgColor(). Here is the function:

So, lets use the following example to show how the toggleBgColor() function works. In my document I have a table and I want the user to be able to click the rows in the table to highlight them. If they click the row again I want to remove the highlighting. Using the toggleBgColor() javascript function above, this is quite an easy task. For each <tr> tag in the table all I have to do is add the onclick attribute to any rows I want to be toggled as follows:

Here is the result:

All in all, this is a very simple javascript function that is very useful. If you have any feedback about this article, please drop us a line and let us know.