Javascript元素互相阻塞

Question

我正在尝试编辑表单的一些元素，但这些元素正在“阻塞”彼此！

<script type="text/javascript">
document.getElementsByClassName("hbspt-form")[0].style.background = "#fffbd5";
document.getElementsByClassName("hbspt-form")[0].style.border= "solid";

document.getElementsByClassName("hbspt-form")[0].style.boxShadow = "10px 20px 30px ";
document.getElementsByClassName("hbspt-form")[0].style.borderColor = "#f7761f";


setTimeout(function(){}, 10);
document.getElementsByClassName("hs_input")[0].style.width="300 px";
document.getElementsByClassName("hs_input")[0].style.background = "#455560";
document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.color = "#fff";
document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.borderColor= "#ffd188";

</script>

有谁能告诉我如何解决这个问题？（我试图使用变量来防止这种情况，但它没有用。）

提前感谢！

Answer 1

Javascript setTimeout将一个函数作为参数，它将在设置的时间过后运行以及等待的时间。 As stated here：

  

它不会阻止它所在的块的执行，而是会阻止它的执行   在一定间隔后调用其输入函数。

在你的情况下，你应该看到的是所有这些指令立即执行，这意味着你永远不会看到你在那里的第一行的结果。

要解决此问题，请在setTimeout：

中移动您想要查看的更改

setTimeout(function(){
  document.getElementsByClassName("hs_input")[0].style.width="300 px";
  document.getElementsByClassName("hs_input")[0].style.background = "#455560";
  document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.color = "#fff";
  document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.borderColor= "#ffd188";
  document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.borderColor= "#ffd188";
}, 10);

Answer 2

查看脚本的最后两行。您似乎正在尝试两次使用完全相同的相同代码。我想知道这是不是故意的？而且，您似乎已将大括号放在错误的位置。

document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.borderColor= "#ffd188";

document.getElementsByClassName("hs_firstname field hs-form-field")[0].style.borderColor= "#ffd188";