Javascript 从JS函数应用到HTML元素样式的更改不会显示

下面是我的代码的一小段

函数checkFields（）{
常量nameFormat=/^[a-zA-Z-'-]*$/；
让fieldPrenom=document.getElementById（“prenom”）；
让divPrenom=document.getElementById（“divPrenom”）；
如果（！fieldPrenom.value.match（名称格式））{
divPrenom.innerHTML=“
请仅限字母”
“+divPrenom.innerHTML
高亮度红色（fieldPrenom）；
返回false；
}否则返回true；
}
功能高亮显示红色（输入框）{
inputBox.style.border=“0.2vw实心红色”；
log（“当前边框样式：+inputBox.style.border”）；
}

input.default{
边框：0.1vw实心；
边界半径：0.25vw；
最小宽度：30vw；
字号：1.5em；
左边距：0.6vw；
}

你应该打电话

highlightRed(fieldPrenom);

在此声明之前

divPrenom.innerHTML = "<br><p>Only letters please</p>" + divPrenom.innerHTML;

未指定给新创建的元素

注意：在您的正则表达式

/^[a-zA-Z-]*$/

中，您对

-

字符进行了两次匹配，因此我删除了该字符的一个实例

以下测试：

函数checkFields（）{
const nameFormat=/^[a-zA-Z'-]*$/；
让fieldPrenom=document.getElementById（“prenom”）；
让divPrenom=document.getElementById（“divPrenom”）；
如果（！fieldPrenom.value.match（名称格式））{
高亮度红色（fieldPrenom）；
divPrenom.innerHTML=“
请仅限字母”
“+divPrenom.innerHTML；
返回false；
}
返回true；
}
功能高亮显示红色（输入框）{
inputBox.style.border=“0.2vw实心红色”；
log（“当前边框样式：+inputBox.style.border”）；
}

input.default{
边框：0.1vw实心；
边界半径：0.25vw；
最小宽度：30vw；
字号：1.5em；
左边距：0.6vw；
}

---

问题在于，当您在此行上设置

.innerHTML

时：

divPrenom.innerHTML = "<br><p>Only letters please</p>" + divPrenom.innerHTML

/*使基本类选择器尽可能不特定
因此，您可以在需要时轻松覆盖它们*/
.违约{
边框：0.1vw实心；
边界半径：0.25vw；
最小宽度：30vw；
字号：1.5em；
左边距：0.6vw；
}
/*尽可能在内联样式上使用类。
这减少了代码冗余并使代码
更容易阅读和书写*/
.red{边框：0.2vw纯红；}

首先感谢您的回答。我对这一行有一个问题

inputBox.classList.add（“红色”）当您运行classList.add（class）时，它是将新类“添加”到元素中的其他现有类中，还是该函数从元素中删除所有类，然后设置新类？（因此，在第二种情况下，它更像是一个“全部替换”功能）。我希望我的问题可以理解：/@ScarySneer不客气。简单的回答是，它将
red
类中的说明应用于您正在调用的
.classList.add（）
上的一个元素。它不影响任何其他元素。因为
红色
类中的指令与已应用的
默认
类的
边框
部分冲突，所以只有样式的这一方面被覆盖。@ScarySneer因此，要清楚，当您将类应用于元素时，您只是在将其指令“添加”到该元素的样式中。如果新的说明与已应用的样式不冲突，则元素将以两种样式的组合结束。如果要添加的新类与已应用样式的某些方面存在冲突，则仅该方面会被应用的新类中的指令覆盖。这个过程实际上就是名称级联样式表中的“级联”效应。
divPrenom.innerHTML = "<br><p>Only letters please</p>" + divPrenom.innerHTML