Why is the class information for this html element not accessed by Javascript?
<p>In my HTML for my file I have a div with the id "divNavyBox."  The code is below.</p>

<pre><code>&lt;div id="divNavyBox" class="box" onmouseover="animated.doAnimation()"&gt;&lt;/div&gt;
</code></pre>

<p>Note that once the mouse hovers over it, it executes the doAnimation() from var animated.</p>

<pre><code>var animated = {

el : document.getElementById("divNavyBox"),

doAnimation : function() {
    if (el.className=="box") {

        el.className="boxAlt";
    }
    if (el.className=="boxAlt") {
        el.className="box";
    }

}

};  
</code></pre>

<p>I want it to switch between these two cs classes once the method doAnimation is executed.  However, it doesn't do anything.  I put an alert statement inside of the if(el.className="box" and it didn't ring up as I executed the function, even though the class really IS box.  The two CS classes that I want to be used are listed below:</p>

<pre><code>.box {

    width: 100px;

    height: 100px;

    background-color: navy;

}
.boxAlt {
width: 100px;
height: 100px;  
background-color: red;
}
</code></pre>

<p>Why does the boolean statement el.className="box" keep returning false?</p>
