使用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但其瀏覽器支持有限。