使用JS&HTML作品，JS&CSS没有'不总是

Changing style using JS & HTML works, JS & CSS doesn't always

本文关键字：JS amp 没有 作品 HTML 使用 CSS      更新时间：2023-09-26

使用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不一致？我想使用这种方法，因为我可以将一个错误类应用于我想要影响的每个元素。

每次点击提交按钮，但没有填写字段时，error就会添加到classList属性中；如果您提交多次，则会添加多个类。而当移除类时，.replace(' error', '')将只替换它遇到的error的第一个实例。

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

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

代码笔

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

相关文章：