javascript - 在 setTimeout 中设置 CSS 不更新

Question

这是一个愚蠢的问题，但是，我已经尝试找出这个问题有一段时间了，但没有任何结果。我环顾四周并使用日志进行了测试，检查了控制台。

我有一个函数可以编辑参数中传递的元素的 css。第一组有效，但是在超时函数内，它似乎被忽略了。

function notif(elem) {
  elem.style.color = "rgb(200,100,100)";
  elem.style.borderBottom = "1px solid rgb(200,100,100)";
  setTimeout(function() {
    elem.style.color = "rgb(200,200,200)";
    elem.style.borderBottom = "1px solid rgb(200,200,200)";
    console.log(elem.style.color, elem.style.borderBottom);
  }, 3 * 1000);
}
notif(document.getElementById('newTodo'));

.input {
  position: relative;
  background: none;
  border: none;
  color: white;
}

.input::placeholder {
  color: rgb(200, 200, 200);
}

.input:focus {
  outline: 0;
  border-bottom: 1px solid rgb(200, 200, 200);
  caret-color: white;
}

#newTodo {
  left: 20;
  top: 10;
}

<input class="input" id="newTodo" placeholder="Add new to-do task...">

传递的元素有效并且没有任何 !important 标记。我在 css 和 html 之后加载了这个脚本。我已经登录了超时并在控制台中得到了它。即使在记录 elem.style 时，它也会显示目标样式已更改，但它们不会显示在我的 html 选项卡中。

如果我做错了什么或者有解决方案，请告诉我。谢谢!

<小时/>

编辑

该片段产生了我想要的结果，但是，在我的网页中并未产生该结果。是否有任何值(value)观可以阻止我可能拥有的这种情况？

<小时/>

已解决

发现原因是因为该元素后来在我忘记的另一个文件中被修改了。我刚刚将要加载的文件移动到此函数之前，并且运行良好。

再次感谢

Answer 1

检查脚本标记是否位于页面底部。

https://faqs.skillcrush.com/article/176-where-should-js-script-tags-be-linked-in-html-documents

我还会在您的 javaScript 中使用变量

<script>
  const item = document.getElementById('newTodo')
  function notif(elem) {
    //...
  }
  notif(item);
</script>