Javascript: Changing Class Names to Alter CSS

As I discussed in my previous post, Javascript: Opportunities Abound, javascript is very powerful and can be used for a wide variety of client-side interactions. One of the most useful items I’ve found for it so far (mostly because of how much I love CSS) is to alter CSS classes! And the best part is it is incredibly easy. So either in an external Javascript file (which is called the same way as an external CSS file), or in the head of your HTML inside a <script> tag, include the following javascript:

The Javascript:

function changeCSS(tagID)
{
   var currentTag = document.getElementById(tagID);
   currentTag.setAttribute("class", "secondClass");
   currentTag.setAttribute("className", "secondClass");
   return;
}

The second setAttribute function is for certain versions of IE that for some odd reason (IE sucks) setting the class through javascript does not always function properly. I personally have not noticed this issue with IE6 or IE7, and IE5 is tops 1% of your users, so you can probably leave it out, I’ve just seen other people using it…

And now the HTML that goes with that JS:

<a href="#" onclick="changeCSS(targetTag);" id="targetTag" class="firstClass">Adjust link CSS</a>

Yep, simple as that! When the link is clicked, it calls the javascript function, sending over the id to identify the tag it should work with. In this case, the link is adjusting it’s own CSS, but it can work on anything else in the page. But what if you want the link to work both ways, to be able to change the CSS class of an object back and forth instead of just one direction? Try this on for size, a simple if statement in your JS function (the same HTML will do)

The New Javascript:

function changeCSS(tagID)
{
   var currentTag = document.getElementById(tagID);
   if (currentTag.className == "firstClass")
   {
      currentTag.setAttribute("class", "secondClass");
      currentTag.setAttribute("className", "secondClass");
   }
   else
   {
      currentTag.setAttribute("class", "firstClass");
      currentTag.setAttribute("className", "firstClass");
   }
   return;
}

And that’s that! Simple right? It is also possible to just change a specific aspect of the CSS instead of the entire class, but I’ll talk about that in a future post. Comments? Questions?

3 Responses to “Javascript: Changing Class Names to Alter CSS”

  1. Jo says:

    I can’t get this to work in IE6.
    Is there a trick to it?

    It seems to change the class name ok (when echoing it through getAttribute), but does not actually apply the new class on the screen.

  2. David says:

    I’ve never had problems with this in IE6. In fact, the className lines are meant specifically for Internet Explorer. If nothing is actually happening visibly, check to make sure your CSS is being applied correctly. I’m not sure what else would cause the line to execute and change the class name, but then not display it notably on the screen…

  3. vlad says:

    Hi David,

    This is gold stuff. I’ve been looking for a way to re-render the dom elements using javascript just because of the IE6 class name issue. And I’ve stumbled over this.
    So thanks for posting this. It is really helpfull.

    P.S. I had no problem using it on IE6.

Leave a Comment