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

Question

我还不想使用 JQuery，所以我正在尝试寻找替代解决方案。我写了一个带有工作验证功能的 from。现在我想添加一个函数来编辑在无效输入上显示的标签。我的css代码是这样的：

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

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

invalidInputHidden.className += " error";

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

score 1 · Accepted Answer

“是不是因为 id 优先于类”

是的。

“……所以它会一直有display:none;？”

好吧，并非总是如此。绕过通常的特异性规则的一种方法是使用!important：

.error{
    display:block !important;
}

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

1 回答 1