Сбросить цвет границы элемента управления вводом (HTML / Javascript)

Question

Кто-нибудь знает, как сбросить цвет границы элемента управления вводом после его изменения с помощью JavaScript? Полезно для проверки, выделяя поля, в которых есть неверные или недействительные данные и т. Д.

например. изменение границы:

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

как сбросить? следующая строка просто полностью удаляет границу ...

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

если я сбрасываю цвет границы обратно на определенный цвет (например, черный или серый и т. Д.), В некоторых браузерах / операционных системах это может выглядеть странно, что-то вроде «темы» элементов управления ...

спасибо, куча!

Answer 1

Не делайте этого с настройкой атрибутов стиля. Сделайте это с помощью CSS-классов. Я также рекомендовал бы использовать библиотеку Javascript, чтобы справиться с этим. Это просто делает код чище.

Удаление атрибутов CSS проблематично, потому что вы не всегда знаете, к чему они должны быть возвращены. Добавление и удаление классов просто ... работает.

Вы можете иметь несколько классов на элемент, так что нет никаких аргументов против этого (imho).

Я привык к jQuery, поэтому мой пример с этим.

Неправильный путь:

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

Answer 2

Это работает для меня:

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

Answer 3

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

Правильный способ «сброса» - установить значение по умолчанию. Я не уверен, что по умолчанию, но я бы предположил, что-то вроде «1px черный» или подобное.

Я обычно использую эту технику в различных приложениях. Когда я не знаю значения по умолчанию, я установлю свое собственное «значение по умолчанию», чтобы я мог повторить его. Один из моих любимых методов работы с веб-страницами - установить цвет фона элемента управления, а не границы. Это очень хорошо видно, и вы можете выбрать более приглушенный цвет и при этом оказывать влияние. В этом случае очень легко установить фоновый цвет на белый, что является значением по умолчанию.