Question

我有这个元素：

<div id="newDimention">
  <div class="newDimention">
  </div>
</div>

我正在尝试使用javascript更改其不透明度：

let newDimention=document.getElementById('newDimention');

setTimeout(()=>{
 setDimention();
  newDimention.innerText="You've uncovered the third dimension."
   newDimention.style.color="purple";
    newDimention.style.fontSize='30px';
    newDimention.style.marginTop='30px';
    newDimention.style.opacity="0";
    })



const setDimention = () => {
for (var i = 0,b=14; i <= 500; i++) {
 setTimeout(()=>{
//document.getElementById("newDimention").style.opacity=String(Math.round(i/50)/10);
   newDimention.style.opacity=String(Math.round(i/50)/10);
 },i*b)
}
}

我尝试不转换为字符串，而是尝试通过类id进行访问。 Devtools清楚地表明String(Math.round(i/50)/10)每次都会逐渐增加。但是newDimention.style.opacity每次都是'0'。

然后，String(Math.round(i/50)/10)==='1'，newDimention.style.opacity立即更改为'1'。因此由于某种原因，它一直保留在'0'之前，直到i===500，然后突然变为'1'。我没有任何其他函数来操纵这个元素。而且，如果我删除行newDimention.style.opacity=String(Math.round(i/50)/10);，则不透明度将保持在'0'，因此该行应更改此元素的不透明度。

为什么会这样？

Answer 1

在写这个问题时，我意识到我在var中使用let而不是for loop，所以当这些函数最终在setTimeout之后被触发时，他们使用了{{ 1}}，即最新值。将其更改为i===500可以解决此问题：

let

来自https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let：

“ const setDimention = () => { for (let i = 0,b=14; i <= 500; i++) { setTimeout(()=>{ //document.getElementById("newDimention").style.opacity=String(Math.round(i/50)/10); newDimention.style.opacity=String(Math.round(i/50)/10); },i*b) } }允许您声明限制在块语句或使用它的表达式范围内的变量，这与var关键字不同，var关键字在全局或整个函数本地定义变量不管块范围如何。”

使用JavaScript逐渐更改不透明度不起作用

1 个答案: