使用JS和HTML可以更改样式，但JS和CSS并不总是

Question

使用JS和HTML标记始终有效： Codepen

if (document.forms['myForm'].name.value == '') {
    name.style.background = "pink";
}
else {
    name.style.background = "white";
}

使用JS和CSS 并不总是有效： Codepen

if (document.forms['myForm'].name.value == '') {
    // give this element the .error class from the css file
    name.className = name.className + " error";
}
else {
    // this removes the error class
    name.className = name.className.replace(" error", ""); 
}

为什么JS和CSS不一致？ 我想使用这种方法，因为我可以将错误类应用于我想要影响的每个元素。

Answer 1

每次您单击提交按钮时，如果没有填写字段， error添加到classList属性； 如果您提交不止一次，则将添加多个课程。 删除类时， .replace(' error', '')将仅替换遇到的error的第一个实例。

您可以使用regex查找所有 error实例：

name.className = name.className.replace(/ error/g, "");

码笔

旁注：您可以利用classList但其浏览器支持有限。