Почему значение marginLeft не изменяется?

Question

[Egor S]

(function () {
    var grab = false;
    var slides = null;
    onload = function () {
        init();
    };

    function init() {
        var rootEl = document.getElementsByClassName('containerBand');
        if (rootEl) {
            var root = rootEl[0];
            root.onmousemove = moveMouse;
            slides = root.getElementsByClassName('container');
            if (slides.length > 0) {
                for (var i = 0; i < slides.length; i++) {
                    slides[i].onmousedown = mouseClick;
                    slides[i].onmouseup = mouseUp;
                }
            }
        }
        else {
            return false;
        }
    };

    function moveMouse(e) {
        for (var i = 0; i < slides.length; i++) {
            var slide = slides[i];
            slide.style.marginLeft = slide.style.marginLeft + "20px";
        }
    };

    function mouseClick(e) {
        grab = true;
        return false;
    }

    function mouseUp() {
        grab = false;
    }
})();

Почему при срабатывании onmousemove, не работает изменение отступа в строке

slide.style.marginLeft = slide.style.marginLeft + "20px";

Работает только при первом onmousemove.

Answer 1

[Денис]

Ответ так и напрашивается: "Потому, что так написан сценарий" - при движении мыши, установить свойству "margin-left" значение "20px". Не изменять это значение при каждом движении по какому-то алгоритму, а просто статично установить и всё. Хорошо бы было узнать, какой результат вы ожидаете?

Хорошо, не буду вас мучить... В цикле, где вы пытаетесь изменять значение, выведите в консоль "slide.style.marginLeft". Есть два варианта того, что вы увидите при первом срабатывании: или же пустую строку или же уже установленное значение, которое было прописано в атрибуте style, например, "30px". Если строка пустая, то "" + "20px" == "20px", если же значение, то "30px" + "20px" == "30px20px". В последнем случае, по крайней мере современные браузеры, проигнорируют некорректное значение. Выход: или же заранее прописать какое-то значение в атрибуте style у этих элементов, или же в цикле, где вы устанавливаете обработчики событий onmousedown и onmouseup, добавить такое значение, например, slides[i].style.marginLeft = 0;, или же использовать метод getComputedStyle(), когда надо подхватить значения, прописанные в CSS и не забывать полученное текущее значение приводить к числовому типу

slide.style.marginLeft = (parseInt(slide.style.marginLeft, 10) + 20) + "px";