Use of ID in CSS - deprecated?

Discussion in 'Javascript' started by Clive Backham, Mar 19, 2008.

  1. 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?
    Clive Backham, Mar 19, 2008
    #1
    1. Advertising

  2. 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
    Gregor Kofler, Mar 19, 2008
    #2
    1. Advertising

  3. Clive Backham

    pr Guest

    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>.
    pr, Mar 19, 2008
    #3
  4. Clive Backham

    Tim Slattery Guest

    Clive Backham <> 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://members.cox.net/slatteryt
    Tim Slattery, Mar 19, 2008
    #4
  5. 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.
    Clive Backham, Mar 20, 2008
    #5
  6. Clive Backham

    The Magpie Guest

    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"../>
    The Magpie, Mar 20, 2008
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Barney Barumba
    Replies:
    0
    Views:
    552
    Barney Barumba
    Jul 23, 2003
  2. Frederic
    Replies:
    0
    Views:
    2,189
    Frederic
    Nov 4, 2004
  3. Terry Reedy

    Deprecated: list comp leak use

    Terry Reedy, Oct 21, 2003, in forum: Python
    Replies:
    3
    Views:
    284
    Terry Reedy
    Oct 21, 2003
  4. Replies:
    23
    Views:
    1,410
    Skarmander
    Sep 21, 2006
  5. dana
    Replies:
    5
    Views:
    971
Loading...

Share This Page