Reset an input control's border color (HTML/Javascript)

Question

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.

E.g. changing the border:

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...

thanks heaps!

Answer 1

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.

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

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

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

Wrong way:

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

Right way:

<style type="text/css"> .redborder { border: 1px solid red; } </style>  <script type="text/javascript"> $("#myinput").addClass("redborder"); $("#myinput").removeClass("redborder"); $("#myinput").toggleClass("redborder"); </script>