javascript - 我的警告标签未显示在无效输入上

Question

我不想使用 JQuery(目前)，所以我正在尝试寻找替代解决方案。 我写了一个具有有效验证功能的 from。现在我想添加一个功能来编辑要在无效输入上显示的标签。我的 CSS 代码是这样的:

#invalidInputHidden{
    display:none;
    color:#FF0000;
}
.error{
    display:block;
}

所以警告文本一开始是隐藏的。在我的 JavaScript 中，我向标签添加了一个类，这应该使它再次可见。我把它放在验证函数中:

invalidInputHidden.className += " error";

然而这并没有发生。是不是因为一个 id 优先于一个类，所以它总是有“display:none;” ？

Answer 1

"Is it because of the fact that an id has priority over a class"

是的。

"...so it will always have display:none;?"

好吧，不是总是。绕过通常的特异性规则的一种方法是使用 !important :

.error{
    display:block !important;
}

这通常不被认为是好的做法，实际上我上面提供的 MDN 链接建议不要这样做，但我个人不介意你的情况，你的 .error 类可能应该是应用时最重要的样式规则。