通过JavaScript改变风格，但不能使用变量。

Question

我想做的是根据JavaScript中的一个变量来改变一个DOM元素的左边距。这个函数 作品:

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

然而，这只在我第一次调用函数时有效。之后，它打印出 "切换到tab"，但实际上并没有修改样式。有什么方法可以让我改变风格而不必调用 document.querySelector 每次都是这样？

Answer 1

我想原因是第二次它不知道什么是 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一次，但函数知道你想要什么。所以现在你仍然只调用document.querySelector一次，但函数知道你想要什么。

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失去了范围，你会得到一个硬性错误。否则，逻辑就包含在元素本身中。

Answer 3

原来，问题是我有一个Vue.js元素连接到同一个元素，所以元素被改变了。我把Vue.js声明移到了在 const contentDiv1 = document.querySelector('#About-content1')它解决了这个问题。