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 post a comment on this article.

Doc ID 299
Full URL https://imar.spaanjaars.com/299/change-the-css-class-of-an-object-in-your-page
Short cut https://imar.spaanjaars.com/299/
Written by Imar Spaanjaars
Date Posted 05/18/2004 15:19
Date Last Reviewed 06/10/2006 15:44

Comments

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 Doc ID of the document.

(Plain text only; no HTML or code that looks like HTML or XML. In other words, don't use < and >. Also no links allowed.