удаление стиля css с javascript

Question

У меня есть обычные поля ввода HTML, которые имеют границы по умолчанию в зависимости от настроек Window/Browser.

Во время проверки формы я установил границу элементов красным цветом. для примера

elem.style.border = "1px solid #ff0000"; 

Если пользователь корректирует вход, я хочу, чтобы удалить красную границу, так что поле ввода снова содержит границу с по умолчанию.

Answer 1

Это, вероятно, проще, если вы просто переключите класс.

 var addClass = function(c, e) { 
     e.className += ' ' + c; 
     }, 

     removeClass = function(c, e) { 
     e.className = e.className.replace(c, ''); 
     }; 

Использование:

addClass('redBorder', el); 
removeClass('redBorder', el); 

CSS:

.redBorder { border:1px solid red; } 

Answer 2

Лучший способ сделать это - добавить класс CSS для установки границы. Вы можете добавить класс как

.redBorder{ 
    border: "1px solid #FF0000"; 
} 

И всякий раз, когда вам нужно установить этот класс, вы можете добавить его в качестве класса для элемента. Это облегчит процесс перезагрузки.

Answer 3

В не-IE браузеров, вы можете использовать removeProperty() метод style объекта:

elem.style.removeProperty("border"); 

Тем не менее, имеет смысл добавлять и удалять класс CSS, как это было предложено Kangkan, так как это будет работать во всех основных браузерах.

Answer 4

Вот два способа в зависимости от ваших потребностей и возможностей для добавления CSS

заменяющие класс является лучшим решением в целом в случае нескольких классов - см. другие ответы, например

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