Use of ID in CSS - deprecated?

[Clive Backham]

My use of Javascript has until now been fairly limited, but I am now
starting to look into using it to manipulate the DOM. To this end it
appears that getElementById is a core function.

However, I have been in the habit of setting CSS styles through the
use of ID attributes, which means that many of my pages have multiple
elements with the same ID, and of course this makes using
getElementById rather difficult.

It strikes me that perhaps using the ID attribute to select a style is
deprecated, and I should switch to using the CLASS attribute instead.
Would I be correct in thinking this, or is there some other more
subtle issue that I have missed?

 

[Gregor Kofler]

Clive Backham meinte:

My use of Javascript has until now been fairly limited, but I am now
starting to look into using it to manipulate the DOM. To this end it
appears that getElementById is a core function.

However, I have been in the habit of setting CSS styles through the
use of ID attributes, which means that many of my pages have multiple
elements with the same ID, and of course this makes using
getElementById rather difficult.

....and your documents invalid. Ids are supposed to be unique, hence
getElementById() vs. (for example) getElementsByName().

It strikes me that perhaps using the ID attribute to select a style is
deprecated, and I should switch to using the CLASS attribute instead.
Would I be correct in thinking this, or is there some other more
subtle issue that I have missed?

Your issues have nothing to do with JS. Perhaps the "subtle issue" is,
that you have never written a valid HTML document.

Anyway: ids aren't deprecated.

Apart from the "reusability" of classes with elements, the possibility
of ids to be used as anchors within pages, the lack of native DOM
methods to access elements specified class properties, the problems of
IE(6?) with Ids and element names, etc.
classes and id also have different priorities when combining styles.

Gregor

 

[pr]

My use of Javascript has until now been fairly limited, but I am now
starting to look into using it to manipulate the DOM. To this end it
appears that getElementById is a core function.

However, I have been in the habit of setting CSS styles through the
use of ID attributes, which means that many of my pages have multiple
elements with the same ID, and of course this makes using
getElementById rather difficult.

It strikes me that perhaps using the ID attribute to select a style is
deprecated, and I should switch to using the CLASS attribute instead.
Would I be correct in thinking this, or is there some other more
subtle issue that I have missed?

HTML 4.01 specifies that an id attribute must have a name that is unique
in a document
<URL: http://www.w3.org/TR/html401/struct/global.html#adef-id>.
I don't know of a browser that practically enforces this in the DOM, but
as you have seen it complicates life if you don't observe the
restriction, and there's always the chance that a UA somewhere will (or
does) behave in unanticipated ways when encountering the error.

CSS classes and the className DOM property are in many ways the simplest
method to style elements, but in addition to styling using ID selectors,
don't forget the 'style' HTML attribute and DOM property, which will
apply CSS to an individual element regardless of whether it has an id.

See <URL: http://www.w3.org/TR/html401/present/styles.html#adef-style>
and <URL: http://developer.mozilla.org/en/docs/DOM:element.style>.

 

[Tim Slattery]

However, I have been in the habit of setting CSS styles through the
use of ID attributes, which means that many of my pages have multiple
elements with the same ID, and of course this makes using
getElementById rather difficult.

The intent of the id attribute is to identify a single element in the
DOM. You can have multiple elements with the same "name" attribute.
That's why there's a "getElementById" (note the singular) method but a
getElementsByName method (plural).

It strikes me that perhaps using the ID attribute to select a style is
deprecated, and I should switch to using the CLASS attribute instead.
Would I be correct in thinking this, or is there some other more
subtle issue that I have missed?

You can certainly define a class in your CSS
(.somethingorother{....}) and invoke it using the HTML "class"
attribute.

 

[Clive Backham]

OK, thanks to everyone who has responded. It is clear that the way
I've been using ID attributes to select styles for multiple elements
is wrong and that I should have been using CLASS attributes instead. I
will make the necessary changes.

 

[The Magpie]

[snip]

However, I have been in the habit of setting CSS styles through the
use of ID attributes, which means that many of my pages have multiple
elements with the same ID, and of course this makes using
getElementById rather difficult.

It also makes your documents invalid - an ID must (not "should") be
unique within the document. Instead, use <tag.. class="class_name"../>