I have normal HTML input fields, that have default borders depending on Window/Browser settings.
During form validation I set the border of elements to red. for Example
elem.style.border = "1px solid #ff0000";
If the user corrects the input, I want to remove the red border, so that the input field contains again the default border.
It's probably easier if you just toggle the class.
var addClass = function( c, e ) {
e.className += ' ' + c;
},
removeClass = function( c, e ) {
e.className = e.className.replace( c, '' );
};
Usage:
addClass( 'redBorder', el);
removeClass( 'redBorder', el);
CSS:
.redBorder { border:1px solid red; }
The best way of doing it is adding a CSS class to set the border. You can add a class as
.redBorder{
border: "1px solid #FF0000";
}
And whenever you need to set this class, you can add this as the class for the element. This will ease the process of resetting the same.
In non-IE browsers, you can use the removeProperty() method of the style object:
elem.style.removeProperty("border");
However, it makes more sense to add and remove a CSS class, as Kangkan suggested, since this will work in all major browsers.
Here are two ways depending on your needs or possibilities to add css
replacing the class is a better solution overall in case of multiple classes - see other answers for example
<style>
.red { border:1px solid red }
.black { border:1px solid black }
</style>
<input class="black" type="text" onKeyUp="this.className = isNaN(this.value)?'red':'black'">
<input class="black" type="text" onKeyUp="this.style.border = isNaN(this.value)?'1px solid red':'1px solid black'">
