Changing StyleSheets

[email protected] · May 18th, 2004, 05:57 AM

Hello Everyone and thanks for your help in advance. I am developing a DHTML page with various rollover effects. I know that styles can be changed for an element via javascript. But I wanted to know if the CSS class for an element could be changed instead of changing each attribute separately, i.e. style.background.color? It would seem that this would be an easier way if possible, to change attributes rather than hardcoding it. Any feedback on this would be greatly appreciated. Thanks.

Imar · May 18th, 2004, 07:06 AM

Hi Hugh,

Long time no see ;)

You can use the className property to change the class info for an entire object. The following example shows hows this works (it's really simple; just set myObject.className = 'NewClassName';):

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.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 
<a href="http://msdn.microsoft.com/library/default.asp?
    url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp?frame=true">
        className</a> CSS property.
</p>

</body>
</html>

Cheers,

Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.

[email protected] · May 18th, 2004, 03:40 PM

Thanks for the help. Worked like a charm.