Change the CSS Class of an Object in Your Page
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.
Links in this Document
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.