#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 2001
    Posts
    149
    Rep Power
    17

    Changing stylesheet classes in Javascript


    I'm building a menu system that uses layers. I have built the layers to reference a specific class from an external CSS file, which works fine, but I want to be able to change the stylesheet class using Javascript, but I can't figure out how to do it.

    So, I've built my stylesheet classes and layers like such:

    Code:
    <style type="text/css">
      div.myclass01
      {
        text-align:left;
        border: #FFFFFF;
        border-top-width: 1px;
        border-bottom-width: 0px;
      }
    
      div.myclass02
      {
        text-align:right;
        border: #00FF00;
        border-top-width: 1px;
        border-bottom-width: 1px;
      }
    </style>
    
    
    <div id="layer01" class="myclass01" style="position:absolute; .... "></div>
    ... but now I want to change the 'class' to something else, in this case, 'myclass02'... ONLY in Javascript.

    I have tried doing this:

    Code:
      <SCRIPT LANGUAGE="javascript">
        document.getElementById("layer01").class = "myclass02";
      </SCRIPT>
    ... but it doesn't seem to work. I has even tried to see whether I can retrieve the name of the class from the layer using:

    Code:
      <SCRIPT LANGUAGE="javascript">
        alert(document.getElementById("layer01").class);
      </SCRIPT>
    ... just for debugging purposes, and it doesn't work.

    So obviously, I assume that the .class element is wrong... so the question is, what's the correct way of accessing the layer class?

    Any ideas?

    - coredumped.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2001
    Posts
    57
    Rep Power
    17
    document.all['divId'].className = 'whatever'
    works in IE ,however not sure about the rest of em,netscape and such...
  4. #3
  5. No Profile Picture
    CF sMod
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2000
    Location
    Maine, USA (a.k.a. Boonies)
    Posts
    242
    Rep Power
    19

    Re: Changing stylesheet classes in Javascript


    Originally posted by coredumped
    So obviously, I assume that the .class element is wrong... so the question is, what's the correct way of accessing the layer class?
    Either use refToElement.className = 'newclass', or refToElement.setAttribute('class', 'newclass')
    Jason Contact Me
    Super moderator @ CodingForums
  6. #4
  7. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    2
    Rep Power
    0
    [code]<SCRIPT LANGUAGE="javascript">
    document.getElementById("layer01").className = "myclass02";
    </SCRIPT>

    You just have to change class to className and it should work...
  8. #5
  9. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Welcome to DevShed Forums, spikytiger2001.

    While I appreciate that you were trying to help, this thread is over 5 years old. Please avoid posting in non-stickied threads over two months old.

    Notes to anyone else who finds this:

    document.all is obsolete. It should only be used to support IE4 and workaround bugs in IE5.x's implementation of DOM1.

    Navigational menus should be marked up as unordered lists.
    I suggest you learn how semantics apply to X/HTML. Semantics is really a very important subject when
    it comes to X/HTML.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  10. #6
  11. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2008
    Posts
    2
    Rep Power
    0

    wtf


    Well as I am new... and I thought I'd be helpful by posting a working solution, I did. I know nothing bout sticky what evers... and where does unordered lists come into this? Maybe this is the reason why my Yahoo mail doesn't work on any of my browsers. And semantics!!? Is that an insult? You can take your semantics and shove it up your ***! People who dont know about semantics are not programmers.

    Comments on this post

    • flashbck disagrees
  12. #7
  13. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4309
    Ahem!

    Those two "notes" were in response to other posts in this thread. I apologize if I didn't make that clear enough.

    It seems that the majority of new members here aren't aware of the importance of semantics.

    At the top of the thread listings of most of the forums here are a few stickied (important) threads.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  14. #8
  15. /* Spawn Killer Killer */
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Nov 2004
    Location
    New Orleans, LA, USA
    Posts
    1,224
    Rep Power
    219

    Question


    Originally Posted by spikytiger2001
    Well as I am new... and I thought I'd be helpful by posting a working solution, I did.
    I think the problem here is that you "pulled up" a thread from August 22nd, 2002. It is great that you want to help other people out. However, old threads should be left to die.

    Originally Posted by spikytiger2001
    and where does unordered lists come into this?
    Kravvitz mentioned unordered lists because the original post back in 2002 was in regards to a menu system. Since you dragged this thread back to life, other people may read it and not notice that it is so old and therefore refers to outdated methods like document.all

    Originally Posted by spikytiger2001
    And semantics!!? Is that an insult?
    You may have noticed that Kravvitz posted the part about unordered lists and semantics after writing this:
    Originally Posted by Kravvitz
    Notes to anyone else who finds this:
    It was merely information for the hundreds of other people who may read the thread that you dragged up from the thread graveyards.

    Originally Posted by spikytiger2001
    People who dont know about semantics are not programmers.
    And many people making websites are not programmers. Even some programmers using HTML don't use elements properly because they only view HTML as a display "language" that they will just let a program like dreamweaver generate for them.

    Originally Posted by spikytiger2001
    You can take your semantics and shove it up your ***!
    Attitudes like this will make people NOT want to help you. Any programmer will understand this logical statement.
    Code:
    IF <you are rude> THEN <we will ignore your questions>

IMN logo majestic logo threadwatch logo seochat tools logo