Topic: Assign New Class to Object (Page 1 of 1)

Been trying to figure this one out, but I'm not sure what I'm looking for and I'm exhausted.

I want to use a function to change the class assigned to an object. Say I have two classes, like so ...

.class1 {
blah
}

.class2 {
blah
}

... and to start, I have an image assigned class1 ...

<IMG ID="myImage" CLASS="class1" SRC ...>

Depending on some factor (probably to be discussed next if I get stuck), I want to change myImage to use class2.

I'm looking for something like document.myImage.class = "class2" -- am I even close?

(This project is taking way, way too long.)

You've got the right idea; just two problems:

the first problem isn't really a *huge* deal, but if you want to do things right, use

document.getElementById('myImage')

instead of

document.myImage

the second problem is that "class" is a reserved keyword in JavaScript, so to get to the class of an element, you use "className" instead.

The final statement is:

document.getElementById('myImage').className = 'class2';

Note that it is possible to assign an element to multiple classes by using a space-separated list (class="class1 class2 class3"). Because of this, simply assigning a new value to className can be a bad idea since it will overwrite all of the classes assigned to an element with the single class that you're assigning. But if you're only using this on specific pieces of code where you know that's not a problem, then you don't really have to worry about it.

Ah, yes, that's what I'm looking for, thanks. And I'll only be using this for a specific navigation bar, so there should be no problems.

Now, let's see how far I get by myself ...