重置输入控件的边框颜色 (HTML/Javascript)

Question

有谁知道使用 javascript 修改输入控件后如何重置它的边框颜色？通过突出显示其中包含不正确或无效数据的字段等，对于验证很有用。

例如。改变边框：

document.getElementById('myinput').style.border = '1px solid red';

如何重置？下一行只是完全删除边框......

document.getElementById('myinput').style.border = '';

如果我将边框颜色重置回特定颜色（例如黑色或灰色等），在某些浏览器/操作系统中，控件的“主题”可能看起来很奇怪......

谢谢你！

Answer 1

不要通过设置样式属性来做到这一点。通过使用 CSS 类来做到这一点。我还建议使用 Javascript 库来处理这个问题。它只是使代码更清晰。

删除 CSS 属性是有问题的，因为您并不总是知道它们应该设置回什么。添加和删​​除类只是......作品。

每个元素可以有多个类，因此实际上没有理由反对这样做（恕我直言）。

我习惯了 jQuery，所以我的例子就是这样。

错误的方法：

$("#myinput").css("border", "1px solid red");

正确的方法：

<style type="text/css">
.redborder { border: 1px solid red; }
</style>

<script type="text/javascript">
$("#myinput").addClass("redborder");
$("#myinput").removeClass("redborder");
$("#myinput").toggleClass("redborder");
</script>

Answer 2

这对我的作品：

document.getElementById('myinput').style.removeProperty('border');

Answer 3

你只是想边境走开？我不这么认为，因为你已经指出，情况并非如此。

到“复位”正确的方法是，以设置为默认值。我不知道默认的是什么，但我估计像“1px的黑色”或类似。

我常用于各种应用中使用这种技术。当我不知道默认的，我要自己选择“默认”，所以我可以再说一遍。我最喜欢的技术，与网页，是设置控件的背景色，而不是边界。这是非常明显的，你可以选择一个更柔和的色彩，仍然有冲击。在这种情况下，这是很容易设置背景回白色，这是缺省值。