通過 JavaScript 更改樣式不適用於變量

Question

我想做的是根據 JavaScript 中的變量更改 DOM 元素的左邊距。 這個 function工作：

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 屬性。 但是，我不想每次調用updateTabs function 時都調用document.querySelector 。 我試過這個：

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;
    }
}

但是，這只適用於我第一次調用 function。 之后，它會打印“切換到選項卡”，但實際上並沒有修改樣式。 有什么方法可以更改樣式而不必每次都調用document.querySelector嗎？

Answer 1

我認為原因是第二次它不知道contentDiv1是什么，你把它放在 function 中怎么樣：

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;
    }
}

所以現在每次 function 運行它都知道contentDiv1是什么。 所以現在你仍然只調用一次 document.querySelector 但 function 知道你想要什么。

Answer 2

這個問題缺少一些上下文，但如果 Hadi Pawar 的回答不正確，我的猜測是該元素正在被破壞和重新創建。 這應該驗證：

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' 丟失 scope，您將收到一個硬錯誤。 否則，邏輯包含在元素本身中。

Answer 3

原來問題是我有一個 Vue.js 元素連接到同一個元素，所以元素被改變了。 我將 Vue.js 聲明移到const contentDiv1 = document.querySelector('#About-content1')之前，它解決了問題。