重置输入控件的边框颜色（HTML / Javascript） [英] Reset an input control's border color (HTML/Javascript)

问题描述

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

Does anyone know how to reset the border color of an input control once you have modified it using javascript? Useful for validation by highlighting fields that have incorrect or invalid data in them etc.

例如。更改边框：

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

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

how to reset? the next line just removes the border completely...

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

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

if I reset the border color back to a particular color (e.g. black or grey etc), it may look strange in some browsers/operating systems that sort of 'theme' the controls...

感谢堆！

推荐答案

不要设置样式属性。通过使用CSS类来实现。我也建议使用Javascript库来处理这个。它只是使代码更清洁。

Don't do it with setting style attributes. Do it by using CSS classes. I would also recommend using a Javascript library to handle this. It just makes the code cleaner.

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

Removing CSS attributes is problematic because you don't always know what they should be set back to. Adding and removing classes just... works.

您可以为每个元素多个类，所以真的没有参数反对这样做（imho）。

You can have multiple classes per element so there's really no argument against doing it this way (imho).

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

I'm used to jQuery so my example is with that.

错误的方式：

$("#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>

这篇关于重置输入控件的边框颜色（HTML / Javascript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！