Question

window.onload{
var form = document.getElementById("contact").childNodes;
for (let i=0; i<form.length;i++){
    form[i].style.border = "2px solid red";
}
}

<form id="contact">
<p>Votre nom :                  </p><input type="text"><br />
<p>Votre Prénom :               </p><input type="text"><br />
<p>Votre e-mail :               </p><input type="email"><br />
<p>Votre numéro de téléphone :  </p><input type="tel"><br />
<p>Décrivez votre projet :      </p><textarea></textarea><br />
<p>                             </p><input type="submit" id="bouton_valider" value="Valider" />
</form>

我正在尝试更改表单中每个子元素的边框颜色。但这不起作用，我也不明白为什么。

Answer 1

我相信您要尝试将所有输入元素突出显示为红色。

您的代码具有以下错误：

window.onload的语法不正确，这是一个函数。
了解更多：https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload
语句：var form = document.getElementById("contact").childNodes;将为您提供所有子节点，而不仅仅是您要设置其边界的节点。这基本上是一个NodeList数组，其中包含所有节点的值，这些节点可能是元素或文本节点。
请参阅：https://javascript.info/basic-dom-node-properties

我已经修复了您的代码，这是有效的代码段。
希望这会有所帮助:)

window.onload = function() {
  var form = document.getElementById("contact");
  var inputList = form.getElementsByTagName('input')
  for (let i = 0; i < inputList.length; i++) {
    form[i].style.border = "2px solid red";
  }
}

<form id="contact">
  <p>Votre nom :                  </p><input type="text"><br />
  <p>Votre Prénom :               </p><input type="text"><br />
  <p>Votre e-mail :               </p><input type="email"><br />
  <p>Votre numéro de téléphone :  </p><input type="tel"><br />
  <p>Décrivez votre projet :      </p><textarea></textarea><br />
  <p>                             </p><input type="submit" id="bouton_valider" value="Valider" />
</form>

Answer 2

您应该这样编写函数

window.addEventListener("load", function(){
  var form = document.getElementById("contact").childNodes;
  for (let i=0; i<form.length;i++){
  if(form[i].style){
  form[i].style.border = "2px solid red";
  }
  
  }
})

<form id="contact">
<p>Votre nom :                  </p><input type="text"><br />
<p>Votre Prénom :               </p><input type="text"><br />
<p>Votre e-mail :               </p><input type="email"><br />
<p>Votre numéro de téléphone :  </p><input type="tel"><br />
<p>Décrivez votre projet :      </p><textarea></textarea><br />
<p>                             </p><input type="submit" id="bouton_valider" value="Valider" />
</form>

Answer 3

并非数组中的所有元素都具有style属性，因此请确保在应用前检查它：）

var form = document.getElementById("contact").childNodes;
for (let i=0; i<form.length;i++){
    if (form[i].style) {
        form[i].style.border = "2px solid red";    
    }
}

页面加载期间无法更改表单的子元素的边框颜色

3 个答案: