# Using JS to change an elements class via its id

**URL:** <https://forum.kirupa.com/t/using-js-to-change-an-elements-class-via-its-id/259275>\
**Category:** web dev\
**Created:** [May 2, 2008, 6:00pm UTC](https://forum.kirupa.com/t/using-js-to-change-an-elements-class-via-its-id/259275 "2008-05-02T18:00:27Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![shane\_c](https://avatars.discourse-cdn.com/v4/letter/s/3be4f8/32.png) [@shane\_c](https://forum.kirupa.com/u/shane_c)\
**Post date:** [May 2, 2008, 6:00pm UTC](https://forum.kirupa.com/t/using-js-to-change-an-elements-class-via-its-id/259275/1 "2008-05-02T18:00:27Z")

</div>

\*_ **EDIT** _ I’m an idiot, and forgot that I made this script to only work in IE, and was testing it in Firefox… Awesome. If a mod wants to delete this thread, feel free. \*\*\*\*

Hey, I’m trying to put together a dropdown nav, but I’m not the best with javascript… You can see what I’ve got so far [here](http://colossaldesign.net/test/babs/index.php).

Basically, it’s a simple horizontal dropdown nav, with submenus that appear on rollover. I’ve got that part basically down, but I also am trying to add another feature - I want the current sections sub-menu to always be visible unless another section is rolled over, in which case only that section’s sub-menu will be visible.

In my markup, the section’s sub-menu that is to be visible is designated with the class “over”, and the _current_ section is designated with the id “over”… Hopefully that makes sense.

My js is just a script that changes the class name of \<li\> elements based on rollover, so my CSS can handle the display stuff (FYI the “alerts” are just for my testing purposes):

```auto
startList = function() {
        if (document.all&&document.getElementById) {
            navRoot = document.getElementById("nav");
            currentPage = document.getElementById("over");
            for (i=0; i<navRoot.childNodes.length; i++) {
                node = navRoot.childNodes*;
                if (node.nodeName=="LI") {
                    node.onmouseover=function() {
                        document.getElementById('over').className = "";
                        alert("Classname="+document.getElementById('over').className);
                        this.className+=" over";
                    }
                    node.onmouseout=function() {
                        this.className=this.className.replace(" over", "");
                        document.getElementById('over').className = "over";
                        alert("Classname="+document.getElementById('over').className);
                    }
                }
            }
        }
    }
    window.onload=startList;

```

And my markup is:

```auto
<ul id="nav">
                <li id="over" class="over"><a class="menuItem" id="neighbors" href=""></a>
                    <ul>
                        <li><a href="">history</a></li>
                        <li><a href="">stories</a></li>
                        <li><a href="">photo album</a></li>
                        <li><a href="">donation</a></li>
                    </ul>
                </li>
                <li><a class="menuItem" id="renovation" href=""></a>
                    <ul>
                        <li><a href="">timeline</a></li>
                        <li><a href="">team</a></li>
                    </ul>
                </li>
                <li><a class="menuItem" id="tour" href=""></a></li>
                <li><a class="menuItem" id="community" href=""></a></li>
                <li><a class="menuItem" id="purchase" href=""></a></li>
                <li><a class="menuItem" id="contact" href=""></a></li>
            </ul>

```