SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    SitePoint Book question: Simply Javascript - Accessing style class of an element

    Hi All,

    I learning javascript on my own, and I recently purchased the book "Simply Javascript" from Sitepoint and have read up to ch. 4. It's a great book and I recommend it to anyone learning JS. My questions are probably are simple, however, I'm having trouble finding the answers. I don't know if I'm missing something in the book or what.

    1.) Using the DOM element k, how would I access the style class assigned to it?

    On page 74, it says
    Unfortunately, no built-in DOM function lets you get elements by class...
    then the book shows you how to create a custom one you can include in your custom Core library.

    However on page 77 it reads
    Every element node has a className property, which corresponds directly to that element's class attribute in the HTML.
    I am confused. Can I access the style class assigned to a DOM element k? How would I code this?

    Also, using the same DOM element k, how would I access the style property for background color? How would I code this?

    All help is appreciated!

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by rchqrd View Post
    Can I access the style class assigned to a DOM element k? How would I code this?
    A class is made up of style declarations.
    The DOM doesn't handle classes because they are an html only thing, whereas the DOM handles styles instead.
    It's not a good idea to use javascript to change styles because that crosses the presentation/behaviour boundary. This is why it's better to change the classname instead, so that management of the presentation stays on the css side of things.

    Be aware too of a certain issue. If a css class is set for an element, that doesn't set the styles for it so they will all still be empty, until you explicitly set the style from a script. This is another good reason to use the class names instead.

    Anyway, to answer your question

    Code CSS:
    .hidden {
        display: none;
    }

    Code Javascript:
    var elem = document.getElementById('myID');
    elem.style.display = 'none'; // set style
    elem.style.display = ''; // clear style
    elem.className = 'hidden'; // set class
    elem.className = ''; // clear class

    Quote Originally Posted by rchqrd View Post
    Also, using the same DOM element k, how would I access the style property for background color? How would I code this?
    The scripted access to styles uses the same names as the css property names with one caveat, hyphens in a name can be confused for a minus sign, so instead of that, Javascript uses camelCase instead.
    Last edited by paul_wilkins; Jan 23, 2008 at 13:48.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jan 2008
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, PW, for your detailed reply. I definitely agree with keeping presentation, behaviour and content separate, and that is what I plan to do, if I create the code from scratch. However, when I look through various code on the web (and in books), things are done in a variety of ways, and I'm just trying to understand what I am looking at. The variety makes me curious and I start trying to do new things (from my noob standpoint, probably not new to you guys here).

    Thanks again for your help, much appreciated!!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •