Zurücksetzen der Rahmenfarbe eines Eingabesteuerelements (HTML/Javascript)

Question

Kann jemand die Rahmenfarbe eines Eingabesteuerelements zurücksetzen, nachdem Sie es mit Javascript geändert haben? Nützlich für die Validierung durch Markieren von Feldern, die inkorrekte oder ungültige Daten enthalten, etc.

z. Ändern der Grenze:

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

wie zurücksetzen? die nächste Zeile entfernt nur die Grenze vollständig ...

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

wenn ich die Rahmenfarbe zurückgesetzt auf eine bestimmte Farbe (zB schwarz oder grau usw.), kann es in einigen Browsern/Betriebssystemen seltsam aussehen, dass Art "Thema" die Kontrollen ...

danke Haufen!

Answer 1

Tun Sie es nicht mit dem Festlegen von Stilattributen. Tun Sie es mit CSS-Klassen. Ich würde auch empfehlen, eine Javascript-Bibliothek zu verwenden, um das zu handhaben. Es macht nur den Code sauberer.

Das Entfernen von CSS-Attributen ist problematisch, weil Sie nicht immer wissen, auf was sie zurückgesetzt werden sollen. Das Hinzufügen und Entfernen von Klassen funktioniert einfach.

Sie können mehrere Klassen pro Element haben, also gibt es wirklich keinen Grund, dies nicht zu tun (imho).

Ich bin an jQuery gewöhnt, also ist mein Beispiel damit.

Falsche Richtung:

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

Richtiger Weg:

<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

Wollen Sie einfach die Grenze weg zu gehen? Ich denke nicht, wie Sie gesagt haben, ist das nicht der Fall.

Der richtige Weg zum "Zurücksetzen" ist die Standardeinstellung. Ich bin mir nicht sicher, was der Standard ist, aber ich würde etwas wie '1px schwarz' oder ähnliches erraten.

Ich verwende diese Technik häufig in einer Vielzahl von Anwendungen. Wenn ich den Standard nicht kenne, werde ich meinen eigenen "Standard" einstellen, damit ich es wiederholen kann. Eine meiner Lieblingstechniken mit Webseiten besteht darin, die Hintergrundfarbe des Steuerelements und nicht den Rahmen festzulegen. Es ist sehr gut sichtbar und Sie können eine gedämpftere Farbe wählen und trotzdem Wirkung haben. In diesem Fall ist es sehr einfach, den Hintergrund auf Weiß zurückzusetzen, was der Standardwert ist.

Answer 3

Dies funktioniert für mich:

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