Что делать если при значении false, действия все равно выполняются?

Question

[Арсений Соколовский]

У меня такой javascript код

if(document.getElementById("background_bar").style.height == 80 + "px" || document.getElementById("background_bar").style.height > 80 + "px" ){
            var star1 = $('#star1');
        console.log(star1.attr('class'));
        star1.removeAttr('class', 'star1-und');
        star1.attr('class', 'star1-yes');
        var star2 = $('#star2');
        console.log(star2.attr('class'));
        star2.removeAttr('class', 'none');
        star2.attr('class', 'star2-und');

        var star1l = $('#stars');
        console.log(star1l.attr('class'));
        star1l.removeAttr('class', 'none');
        star1l.attr('class', 'star1line');

        document.getElementById('stars').src = '/img/Stars_1.png'

        star1s()
        stars = 1;
        }

Если высота элемента равна 80 пикселей или больше чем 80 пикселей, то выполняются действия. Ну так вот, если высота элемента намного меньше чем 80 пикселей ( например высота 4 пикселя) , то действие почему-то выполняется. Что делать?

P.S. пока я не добавил

|| document.getElementById("background_bar").style.height > 80 + "px"

, когда элемент достигал высоты 80 px, то все происходило правильно.

Answer 1

[Максим Дунаевский]

Вы неправильно используете приведение типов в JavaScript. Ваш код по факту сравнивает не высоту блока с заданным числом, а строку с другой строкой, поэтому и поведение такое странное. Правильно писать так:

(function (){
    "use strict";

    var bgBlock = document.getElementById("background_bar");

    if (bgBlock.scrollHeight > 80) { // bgBlock.scrollHeight всегда число
        // Какой-то код, который выполняется для высоты меньше 80 px
    } else {
        // Другой код, если блок меньше
    }
}());

Подробнее здесь.

Comments

[Арсений Соколовский]

Спасибо!