Réinitialiser la couleur de la bordure d'un contrôle d'entrée (HTML/Javascript)

Question

Est-ce que quelqu'un sait comment réinitialiser la couleur de la bordure d'un contrôle d'entrée une fois que vous l'avez modifié en utilisant javascript? Utile pour la validation en mettant en surbrillance les champs qui contiennent des données incorrectes ou invalides, etc.

E.g. changer la frontière:

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

comment réinitialiser? la ligne suivante enlève juste la frontière complètement ...

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

si je réinitialiser la couleur de la bordure de retour à une couleur particulière (par exemple, etc noir ou gris), il peut paraître étrange dans certains navigateurs/systèmes d'exploitation ce genre de 'thème' les contrôles ...

merci heaps!

Answer 1

Ne le faites pas avec les attributs de style. Faites-le en utilisant des classes CSS. Je recommande également d'utiliser une bibliothèque Javascript pour gérer cela. Cela rend le code plus propre.

La suppression des attributs CSS est problématique car vous ne savez pas toujours à quoi ils doivent être remis. Ajouter et supprimer des classes juste ... fonctionne.

Vous pouvez avoir plusieurs classes par élément donc il n'y a vraiment aucun argument contre le faire de cette façon (imho).

Je suis habitué à jQuery donc mon exemple est avec ça.

Mauvaise façon:

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

chemin droit:

<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

Voulez-vous simplement la frontière pour aller loin? Je ne le pense pas, comme vous l'avez dit, ce n'est pas le cas.

La bonne façon de «réinitialiser» est de régler par défaut. Je ne suis pas sûr de ce que le défaut est, mais je devinerais quelque chose comme «1px noir» ou similaire. J'utilise couramment cette technique dans une variété d'applications. Quand je ne connais pas la valeur par défaut, je vais définir mon propre "défaut" afin que je puisse le répéter. Une de mes techniques préférées, avec des pages Web, est de définir la couleur d'arrière-plan du contrôle, plutôt que la bordure. Il est très visible et vous pouvez choisir une couleur plus discrète et avoir encore un impact. Dans ce cas, il est très facile de remettre l'arrière-plan au blanc, qui est la valeur par défaut.

Answer 3

Cela fonctionne pour moi:

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