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.
Copyright © 2004-2008 by Shawn Olson.

Comments

< Gary E > at 2007-11-30 08:17:23 EST Email Me

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 > at 2007-10-26 07:53:56 EST Email Me

changecss doesn't appear to work in Opera 9.24

< chris tillam > at 2007-07-03 03:44:28 EST Email Me

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 > at 2007-07-03 03:41:31 EST Email Me

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 > at 2007-02-18 15:19:56 EST Email Me

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 > at 2007-02-06 15:02:30 EST Email MeMy Website

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 > at 2006-12-21 09:36:59 EST Email MeMy Website

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 > at 2006-12-21 08:29:47 EST Email MeMy Website

Doesn't work in Firefox 2
Shawn Olson Creative Arts
sitemap RGB Color Columbus Photography Free Word Search Maker monty hall game Hangman John Dewey