Изменение стиля через JavaScript не работает с переменными

Question

Я хочу сделать, это изменить левое поле элемента DOM на основе переменной в JavaScript. Эта функция работает :

function updateTabs(i) {
    console.log('Switching to tab ' + i)
    switch(i) {
        case 0:
            document.querySelector('#About-content1').style.marginLeft = "0";
            break;
        case 1:
            document.querySelector('#About-content1').style.marginLeft = "-100%";
            break;
        case 2:
            document.querySelector('#About-content1').style.marginLeft = "-199%";
            break;
        default:
            break;
    }
}

Это успешно устанавливает свойство margin-left, как я хочу. Однако я не хочу вызывать document.querySelector каждый раз, когда вызываю функцию updateTabs. Я попробовал это:

var contentDiv1 = document.querySelector('#About-content1');

function updateTabs(i) {
    console.log('Switching to tab ' + i)
    switch(i) {
        case 0:
            contentDiv1.style.marginLeft = "0";
            break;
        case 1:
            contentDiv1.style.marginLeft = "-100%";
            break;
        case 2:
            contentDiv1.style.marginLeft = "-199%";
            break;
        default:
            break;
    }
}

Однако, это работает только при первом вызове функции. После этого он печатает «Переключение на вкладку», но фактически не меняет стиль. Есть ли способ, которым я мог бы изменить стиль, не звоня document.querySelector каждый раз?

Answer 1

В вопросе отсутствует некоторый контекст, но если ответ Хади Павара неверен, я предполагаю, что элемент разрушается и воссоздается. Это должно подтвердить, что:

var contentDiv1 = document.querySelector('#About-content1');

contentDiv1.myResize = function(i) {
    console.log('Switching to tab ' + i)
    var offsets = [0, -100, -199];
    if( i > offsets.length ) return;
    this.style.marginLeft = offsets[i] + '%';
}

[...]

contentDiv1.myResize( n );

Теперь, когда вы вызываете resize, вы получите серьезную ошибку, если 'contentDiv1' потеряет область действия. В противном случае логика c содержится внутри самого элемента.

Answer 2

Оказывается, проблема была в том, что у меня был элемент Vue. js, связанный с тем же элементом, поэтому элемент был изменен. Я переместил объявление Vue. js до const contentDiv1 = document.querySelector('#About-content1'), и это устранило проблему.

Answer 3

Я думаю, причина в том, что второй раз он не знает, что такое contentDiv1, как насчет того, чтобы поместить это в функцию следующим образом:

function updateTabs(i) {
var contentDiv1 = document.querySelector('#About-content1');
    console.log('Switching to tab ' + i)
    switch(i) {
        case 0:
            contentDiv1.style.marginLeft = "0";
            break;
        case 1:
            contentDiv1.style.marginLeft = "-100%";
            break;
        case 2:
            contentDiv1.style.marginLeft = "-199%";
            break;
        default:
            break;
    }
}

Так что теперь каждый раз, когда функция запускает ее знает, что такое contentDiv1 Так что теперь вы по-прежнему вызываете document.querySelector только один раз, но функция знает, что вы хотите.