[英]Changing style through JavaScript doesn't work with variables
I want to do is change the left margin of a DOM element based on a variable in JavaScript.我想做的是根据 JavaScript 中的变量更改 DOM 元素的左边距。 This function works :
这个 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;
}
}
This successfully sets the margin-left property like I want it to.这成功地设置了我想要的 margin-left 属性。 However, I don't want to call
document.querySelector
every time I call the updateTabs
function.但是,我不想每次调用
updateTabs
function 时都调用document.querySelector
。 I tried this:我试过这个:
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;
}
}
However, this only works the first time I call the function.但是,这只适用于我第一次调用 function。 After that, it prints "Switching to tab" but doesn't actually modify the style.
之后,它会打印“切换到选项卡”,但实际上并没有修改样式。 Is there any way I could change the style without having to call
document.querySelector
every time?有什么方法可以更改样式而不必每次都调用
document.querySelector
吗?
I think the reason is that the second time around it doesn't know what contentDiv1
is how about you put that inside the function like this:我认为原因是第二次它不知道
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;
}
}
So now everytime the function runs it knows what contentDiv1
is.所以现在每次 function 运行它都知道
contentDiv1
是什么。 So now you still call document.querySelector only once but the function know what you want.所以现在你仍然只调用一次 document.querySelector 但 function 知道你想要什么。
The question is missing some context, but if Hadi Pawar's answer isn't correct, my guess is that the element is being destroyed and recreated.这个问题缺少一些上下文,但如果 Hadi Pawar 的回答不正确,我的猜测是该元素正在被破坏和重新创建。 This should validate that:
这应该验证:
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 );
Now, when you call resize, you will get a hard error if 'contentDiv1' loses scope.现在,当您调用 resize 时,如果 'contentDiv1' 丢失 scope,您将收到一个硬错误。 Otherwise, the logic is contained within the element itself.
否则,逻辑包含在元素本身中。
Turns out that the problem was that I had a Vue.js element connected to the same element, so the element was changed.原来问题是我有一个 Vue.js 元素连接到同一个元素,所以元素被改变了。 I moved the Vue.js declaration to before the
const contentDiv1 = document.querySelector('#About-content1')
, and it fixed the problem.我将 Vue.js 声明移到
const contentDiv1 = document.querySelector('#About-content1')
之前,它解决了问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.