Блог

В моем HTML для моего файла у меня есть div с идентификатором «divNavyBox». Код приведен ниже.

 <div id="divNavyBox" class="box" onmouseover="animated.doAnimation()"></div>
  

Обратите внимание, что при наведении курсора мыши на него выполняется doAnimation() из var animated.

 var animated = {

el : document.getElementById("divNavyBox"),

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

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

}

};  
  

Я хочу, чтобы он переключался между этими двумя классами cs после выполнения метода doAnimation. Однако это ничего не делает. Я поместил инструкцию alert внутри if (el.className=»box», и она не вызывалась при выполнении функции, хотя класс действительно ЯВЛЯЕТСЯ box. Два CS-класса, которые я хочу использовать, перечислены ниже:

 .box {

    width: 100px;

    height: 100px;

    background-color: navy;

}
.boxAlt {
width: 100px;
height: 100px;  
background-color: red;
}
  

Почему логический оператор el.className=»box» продолжает возвращать false?

здесь вы присваиваете boxAlt, если current = box

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

здесь вы переключаетесь обратно, если current имеет значение boxAlt что всегда верно, если класс был box с самого начала.

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

Измените ее на что-то вроде:

 doAnimation : function() {
    el.className = el.className == "box" ? "boxAlt" : "box";
}
  

В вашем коде по крайней мере три проблемы:

Интересно, почему существует ; before onmouseover .

Затем вы используете el.className="box" в if() , который присваивает "box" className . Используйте == для сравнения.

Наконец, el.style.className не определено.

el.className = "box" это не логический оператор, это присваивание.

el.className == "box" является логическим выражением.