Altering CSS Class Attributes with JavaScript

Altering CSS Class Attributes with JavaScript

By Shawn Olson

Posted on 01.09.04

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.

<script type="text/javascript" src="http://www.shawnolson.net/scripts/public_smo_scripts.js"></script>

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.

Copyright © 2004-2009 by Shawn Olson.

Subscribe to this guestbookComments 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

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?

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

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

sitemap RGB Color Columbus Photography Free Word Search Maker monty hall game Hangman John Dewey