Question

有没有人知道如何使用javascript修改输入控件的边框颜色？通过突出显示其中包含不正确或无效数据的字段等来进行验证。

E.g。改变边界：

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

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

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

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

谢谢堆！

Answer 1

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

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

每个元素可以有多个类，所以实际上没有反对这样做的论据（imho）。

我习惯了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 black'或类似的东西。

我通常在各种应用中使用这种技术。当我不知道默认值时，我将设置自己的“默认”，以便我可以重复它。我喜欢的网页之一是设置控件的背景颜色，而不是边框。它是非常明显的，您可以选择更柔和的颜色，仍然有影响。在这种情况下，将背景设置为白色非常容易，这是默认设置。

重置输入控件的边框颜色（HTML / Javascript）

3 个答案: