Altering CSS Class Attributes with JavaScript
This JavaScript function will dynamically change the style information for any CSS class in a Web Page. Applying this function to a class will cause all items calling on the class to change to the updated style value. This function works even if there are multiple stylesheets referenced in the document.
Function Name: changecss(theClass,element,value)
Example of output (Assuming you have a stylesheet defining the "exampleA" and "exampleB" classes -- the following code creates the effect below):
<span class="exampleA">Example A</span> <span class="exampleB">Example B</span> <span class="exampleA">Example A</span> <input type="button" value="Change A Red" onclick="changecss('.exampleA','color','red')"/><input type="button" value="Change A Black" onclick="changecss('.exampleA','color','black')"/>
Example A
Example B
Example A
To use this function, copy this link and place it in the head of your HTML before any other JavaScript that may use it.
Please include credit when using this script and read this site's Terms & Conditions before using.
This function was last updated on June 23, 2009. It has been tested and works in the following browsers:
- Internet Explorer 6+ (Windows)
- Firefox 3+ (Windows & Linux)
- Google Chrome 2.0.172.33 + (Windows)
- Safari 3.1.1 + (Windows)
- Opera 9.64 +(Windows)
Note that I have tested these browsers on Windows; this function works in Firefox in Linux as well. I assume that the latest Mac versions work the same.
More in the Free Useful Javascripts Series
- Strip Character and Whitespace in JavaScript Function
- Altering CSS Class Attributes with JavaScript
- Select All Checkboxes in a Form with JavaScript
- Using an Object Id with JavaScript
- InnerHTML JavaScript Functions
- Hide Select Menus JavaScript
- Select Some Checkboxes JavaScript Function
- Select Radio Inputs JavaScript
- UseMaps Crash IE When Changed
- Search for JavaScript articles similar to "Altering CSS Class Attributes with JavaScript".
- Search all articles similar to "Altering CSS Class Attributes with JavaScript".
- List all JavaScript articles by Shawn Olson.
- List JavaScript articles from all authors.
Comments on Altering CSS Class Attributes with JavaScript
Lennart Moltrecht said:
This works fine on Firefox, but not on Google Chrome. Can you please fix that? Thanks
[ See Responses ]
hariharadeep m said:
Let me know how to change the back groung image of a button on hover in li of css.
Shawn Olson said:
I have just updated the script to add rules when the properties you want to set are not in the CSS. This may have been your problem when setting values with a dash. However, I could not replicate the dash problem in IE7 or Firefox 2. Could you let me know what browser and version is having that problem?[ See Responses ]
Brian H said:
Your script doesn't seem to work on any CSS properties that contain a dash (background-color, z-index, border-bottom-color, etc). Is there any specific reason for this? I'd like to be able to use this nice, simple script to move around the z-index of certain elements on a page.
Gary E said:
Safari 3.0.4 for PC (possibly all versions) does not seem to include any class names that are not totally lowercase. Opera needs different DOM sniffing code, see my reply to Opera observation below for pointer to patched code.
Thanks to JeroenH.
Simon Wilsher said:
changecss doesn't appear to work in Opera 9.24
[ See Responses ]
chris tillam said:
Oops, lost first line:
This is much much simpler: I found it by looking for a script that changes class, search on "js foo" for the credit:
function whatever() {
for (i=0;i
chris tillam said:
This is much much simpler: I found it by looking for a script that changes class, search on "js foo" for the credit:
function whatever()
if (document.getElementsByTagName("div").item(i).className == "yin _6")
{document.getElementsByTagName("div").item(i).style.visibility = "hidden";}
cheers
Lya santoso said:
Hi,I just want to ask, can I change css with id (not class) here? I got problem and cant solve it until now (for a reason I cant change it to class)
Brian French said:
i cane across an issue with the changecss function. If the style element doesn't exist on one of the stylesheets, then it wont set it. I found the setProperty() method that will create the element if it doesnt exist. see this page (3/4 down): http://www.howtocreate.co.uk/tutorials/javascript/domstylesheets
Shawn Olson said:
Sorry... this example was not working for a while because the corresponding entry in the stylesheet was missing after an update sometime in the last few months. The example now works.
Justin Halsall said:
Doesn't work in Firefox 2
[ See Responses ]
