Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Use of ID in CSS - deprecated?

Reply
Thread Tools

Use of ID in CSS - deprecated?

 
 
Clive Backham
Guest
Posts: n/a
 
      03-19-2008
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?
 
Reply With Quote
 
 
 
 
Gregor Kofler
Guest
Posts: n/a
 
      03-19-2008
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


--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum
 
Reply With Quote
 
 
 
 
pr
Guest
Posts: n/a
 
      03-19-2008
Clive Backham wrote:
> 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>.
 
Reply With Quote
 
Tim Slattery
Guest
Posts: n/a
 
      03-19-2008
Clive Backham <(E-Mail Removed)> wrote:


>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.

--
Tim Slattery
http://www.velocityreviews.com/forums/(E-Mail Removed)
http://members.cox.net/slatteryt
 
Reply With Quote
 
Clive Backham
Guest
Posts: n/a
 
      03-20-2008
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.
 
Reply With Quote
 
The Magpie
Guest
Posts: n/a
 
      03-20-2008
Clive Backham wrote:
> [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"../>
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS Layout question - how to duplicate a table layout with CSS Eric ASP .Net 4 12-24-2004 04:54 PM
confused - html validates, css validates but validate css from the html causes errors Titus A Ducksass - AKA broken-record HTML 6 11-15-2004 12:59 PM
Set CSS property equal to another CSS property? Noozer HTML 10 10-13-2004 09:20 PM
Is there a way to set the a CSS property to be explicitly the same as another CSS property? Joshua Beall HTML 1 12-10-2003 07:21 PM
print.css and screen.css tom watson HTML 1 09-09-2003 02:48 PM



Advertisments