How To Change The Style/Class Of An Object?
 

How do I change the style/class of an object with javascript?



Then I try to change the class/style like so:

I get the error: "setting a property that has only a getter"

And if I try class instead of style, it doesn't like me using the word class in the javascript.

Oh damn. Sorry I didn't find this out earlier. There is a method called "setAttribute" that lets me do just that. Sorry for the pointless thread. :)



EDIT

There's still a problem. It doesn't want to work in Internet Explorer: http://saney.ath.cx:8080/vle/?page=temp

It works in Firefox. The case for the current situation is supposed to be highlighted.

You can set the style, too, but script uses different terminology. You would use:

myObject.style.backgroundColor = "#000000";

In the general case, you remove the hyphen and capitalize the word following.

What if I want to change the class? Javascript won't like me using that word. Still can't get it to work in Internet Explorer.

I've never tried changing the class, but surely one can. Why would you want to? At any rate, I'll dink with it a bit later. I can always use another item of information. Helps replace the forty-leben things I forget every day.

EDIT: Says heah that class is a reserved identifier. You have a number of options, though, ranging from server side, to client-side construction using document.write, to restyling attributes associated with the class style.

I have a feeling that the problem with using setAttribute, is that it's modifying the reference to the object, not the actual object itself. Any suggestions?

Some people are telling me it's not working in their version of Firefox either.

Here's the link once more: http://saney.ath.cx:8080/vle/?page=temp

As DaWei says, it's:
for styles and:
for classes.

setAttribute is non-standard javascript, I believe.

Nono, setAttribute is standard JavaScript. IE doesn't like standards, heh.
As for your original get_object function - if / else ifs in interpreted languages are costly and setting a flag for the right kind of element getting function is definitely not the right way to go about it. How about something like this:
etc..
Another note is to make sure you're not making inferences about functionality supported by the browser just by checking to see if it supports document.all or document.layers or some such. It makes no sense to do so and is akin to browser detection. You should always check for the object you want to use, not a browser that you know supports it; else your scripts will be severely crippled in a bunch of browsers.

I figure that using document.getElementById works 99% of the time (I made that statistic up, just so you know), so as long as you make sure the page degrades gracefully, you can just use that without a problem.

Oh, and document.getElementById("myElement").style.backgroundColour works perfectly fine in Internet Explorer 6.

Even with that (correct here, *high 5* for the UK) spelling of "colour"? Heh

document.getElementById is supported in the vast majority of browsers today, yes. It probably is useless to code around it when the meat of your JS will most likely do something that won't work in the old browsers that don't support document.getElementById anyways. As for caching the output of those functions, that too probably isn't wise. It's not as if the browser is doing anything intensive when it passes you a reference to an element - it's probably just looking it up in a hash table (much like you are doing), except you are doing it in slow JavaScript and it's doing it in some fast compiled language.