Change the CSS Class of an Object in Your Page

It's easy to change style information of any object in your HTML page. With a bit of JavaScript you can change, for example, the border, or background-color of a paragraph.

For example, the following code will add a dashed border of 2 pixels to a <p> element called MyParagraph:

document.getElementById('MyParagraph').style.border = "2px dashed;";

But did you know you can also change the entire CSS class for an object? That allows you to assign an entirely different class, defined in the current page or in an external style sheet, so you can change many style properties at once. The following example demonstrates this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <title>Change CSS Class</title>
  <style type="text/css">
    .ClassOut
    {
      background-color: black;
      color: white;
      font-weight: bold;
    }

    .ClassOver
    {
      background-color: white;
      color: black;
      font-weight: bold;
      border: 1px solid black;
    }
  </style>
</head>
<body>
  <p class="ClassOut" onmouseover="this.className='ClassOver';" 
	       onmouseout="this.className='ClassOut';">
    Hi, I am a paragraph with text. If you hover your mouse 
    over me, my color changes . This is done by setting the 
    className CSS property.
  </p>
</body>
</html>

When you hover your mouse over the paragraph, the code defined in the onmouseover attribute is executed. This code sets the className of the <p> element to the class ClassOver. The this in the example refers to the entire <p> element. When you move your mouse away from the paragraph, the previous class, ClassOut is restored.

This code example change the CSS class of a paragraph, but you can apply this principle to other (X)HTML elements as well.

Live Demo

You can try out a live demo of this example.


Where to Next?

Wonder where to go next? You can read existing comments below or you can post a comment yourself on this article .


Consider making a donation
Please consider making a donation using PayPal. Your donation helps me to pay the bills so I can keep running Imar.Spaanjaars.Com, providing fresh content as often as possible.



Feedback by Other Visitors of Imar.Spaanjaars.Com

On Sunday, August 20, 2006 12:09:51 PM Muzammel Hoque said:
Hi man
thanks for your article. I was having trouble assigning a css class to a HTML Image object on the fly.  your article showed me the way.
keep on the good work.
On Monday, June 23, 2008 9:56:11 AM sezer said:
CSS TEXT examples , Properties , Attribute -
http://css-lessons.ucoz.com/css-text-properties.htm

Talk Back! Comment on Imar.Spaanjaars.Com

I am interested in what you have to say about this article. Feel free to post any comments, remarks or questions you may have about this article. The Talk Back feature is not meant for technical questions that are not directly related to this article. So, a post like "Hey, can you tell me how I can upload files to a MySQL database in PHP?" is likely to be removed. Also spam and unrealistic job offers will be deleted immediately.

When you post a comment, you have to provide your name and the comment. Your e-mail address is optional and you only need to provide it if you want me to contact you. It will not be displayed along with your comment. I got sick and tired of the comment spam I was receiving, so I have protected this page with a simple calculation exercise. This means that if you want to leave a comment, you'll need to complete the calculation before you hit the Post Comment button.

If you want to object to a comment made by another visitor, be sure to contact me and I'll look into it ASAP. Don't forget to mention the page link, or the QuickDocId of the document.

For more information about the Talk Back feature, check out this news item.