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
- Altering CSS Class Attributes with JavaScript
- Change HTML Styles with JavaScript
- Select Some Checkboxes JavaScript Function
- Select All Checkboxes in a Form with JavaScript
- Get a Form Element's Label with JavaScript
- Select Radio Inputs JavaScript
- UseMaps Crash IE When Changed
- Hide Select Menus JavaScript
- Manipulating Element Styles Based on CSS Classes Using Prototype
- Search for JavaScript articles similar to "Altering CSS Class Attributes with JavaScript.
- Search all articles similar to "Altering CSS Class Attributes with JavaScript".
- List JavaScript articles from all authors.
Comments on Altering CSS Class Attributes with JavaScript
Khaled Al Hourani said:
Very good work, it works very well, do you know how can I save the new changes back to the css file? I mean write to the css file and save the changes, so when I get back later the new styles are all there.
Hassaan Abd-ur-Razzaq said:
Will this work on Styles defined on the ppage like in blogger.
...
...[ See Responses ]
Will Bradley said:
Hi,
I tried using this code to modify an imported stylesheet from another domain:
(in this case part of the stylesheet downloaded when you use the 'bing maps' API). Works fine in IE, but in firefox I get a security error:
Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)"
Do you know if there is a workaround for this? I am thinking perhaps it would be possible to clone the class into a inline stylesheet that overrides the imported one, and then modify that?
manish kumar said:
can me make any change to alter whole class on click?
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.
[ See Responses ]
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 ]
