CODEWITHSUNDEEP
javascript
user160820
user160820

Reputation: 15200

removing a css style with javascript

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.

Upvotes: 1

Views: 401

Answers (4)

mplungjan
mplungjan

Reputation: 177684

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'">

Upvotes: 0

meder omuraliev
meder omuraliev

Reputation: 186562

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; }

Upvotes: 4

Tim Down
Tim Down

Reputation: 324497

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.

Upvotes: 1

Kangkan
Kangkan

Reputation: 15571

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.

Upvotes: 1

Related Questions