class and className

Forum Moderators: open

Message Too Old, No Replies

class and className

which to use?

pixeltierra

4:57 pm on Sep 20, 2006 (gmt 0)

I've noticed that: obj.className works in FF and IE. But

obj.getAttribute('className') only works in IE but not FF whereas

obj.getAttribute('class') works in FF but not IE.

What gives? Why isn't the class attribute just 'class' like 'id' and 'name' and other stuff?

What is the best way to refer to and manipulate objects by class?

Fotiman

7:06 pm on Sep 21, 2006 (gmt 0)

What is the best way to refer to and manipulate objects by class?

Personally, I like the Yahoo UI (YUI) Library's Dom Utiltiy for working with elements of a particular class. For example, these methods in particular:

getElementsByClassName
replaceClass
addClass

More info is available at the YUI [developer.yahoo.com] site.

Hope that helps.

penders

1:49 am on Sep 22, 2006 (gmt 0)

I must admit, whilst I have been learning the DOM recently, I did initially expect the obj.getAttribute('class')
method to work cross-browser and it stumped me when it didn't - my otherwise great book didn't explain this anomaly.

I *think* it should if IE worked properly, but (as we know) IE does not. IE it seems does not differentiate between 'element properties' and 'attributes' - to IE they are the same. This is why

obj.getAttribute('className')

works in IE. 'className' is the property of the element object that holds the name of the class (the value of the class attribute). The property could not simply be called 'class' because in JavaScript 'class' is a reserved word - they had to think of something else. ('id' isn't a reserved word, 'name' is an Identifier name so is technically a reserved word when used on its own I guess). There can be more than a hundred element properties(!), there are only a few element attributes.

One way to get around this (cross-browser) is to:

var elClass = el.getAttribute("class"); 
elClass = elClass? elClass : el.getAttribute("className");

But it is far easier just to use

obj.className

to access the object property directly (which works cross-browser) - so I have concluded (without having a great deal of exprience in this matter) that this is the prefered method. It is also the way my book describes - there is no mention of the getAttribute() method in terms of class(es)!

Yeah, I've been having a look at the YUI Library's Dom Utility (thanks Fotiman) - those are some handy functions! But remember that these functions are merely implemented using the standard DOM methods that we already know... and if you have a look at the code you will see they too are using the

obj.className

method (or rather the alternative obj['className']
array syntax) to implement these functions cross-browser. If it's good enough for Yahoo!....

pixeltierra

5:13 am on Sep 22, 2006 (gmt 0)

Fotiman: thanks for the reference. I'll certainly be checking that out. Are there any other libraries that you can recommend?

Fotiman

3:36 pm on Sep 22, 2006 (gmt 0)

thanks for the reference. I'll certainly be checking that out. Are there any other libraries that you can recommend?

I've found that the YUI library is very full featured and allows you to do just about anything. It's currently the only one I use. However, there are some others out there. Check out script.aculo.us [script.aculo.us] and the prototype framework [prototype.conio.net], but keep in mind that anything you can do with them, you can do one way or another with the YUI. :)