Ändern Sie die Hintergrundfarbe eines Eingangsfeldes mit JavaScript

Während der Entwicklung von Websites bevorzugen die meisten Entwickler Webseiten, indem sie die Textfarbe, die Hintergrundfarbe einer Webseite oder HTML -Elemente wie Schaltflächen, Eingabefelder usw. ändern. Dazu verwenden Entwickler CSS. Es kann jedoch erforderlich sein, Webseiten mit JavaScript Styling hinzuzufügen. Zu diesem Zweck können Sie das verwenden “Stil.Hintergrund”CSS -Eigenschaft im JavaScript -Code.

In diesem Beitrag wird die Methode definiert, um die Hintergrundfarbe eines Eingangsfeldes mit JavaScript zu ändern.

So ändern Sie die Hintergrundfarbe eines Eingangsfeldes mit JavaScript?

Verwenden Sie JavaScripts “Stil.Hintergrund”CSS -Eigenschaft, um die Hintergrundfarbe eines Elements wie das Eingabefeld zu ändern. Ein Einzelfarbenwert wird verwendet, um das Attribut des Hintergrundfarbens anzugeben.

Syntax
Folgen Sie der angegebenen Syntax, um die Hintergrundfarbe eines Eingangsfeldes zu ändern:

Element.Stil.HintergrundColor = "Farbe"

Fügen Sie in der obigen Syntax die Farbe mit ihrem Namen oder RGB -Farbcode hinzu.

Beispiel: Ändern Sie die Hintergrundfarbe eines Eingangsfeldes auf einer Schaltfläche Klicken
Fügen Sie zunächst ein Eingabefeld und eine Schaltfläche in die HTML -Datei mit den und Tags hinzu. Fügen Sie ein Klickereignis an die Schaltfläche hinzu, mit der eine Funktion mit dem Namen "Color ()" ausgelöst wird, mit der die Farbe des Textfelds geändert wird, wenn die Schaltfläche klickt:

Ändern Sie die Hintergrundfarbe eines Eingangsfeldes auf einer Schaltfläche Klicken

Klicken

Nach der Ausführung des HTML -Codes ist die Ausgabe wie folgt:

Definieren Sie in der JavaScript -Datei zunächst die Funktion “Farbe”Das wird das Eingabefeld abrufen, indem er seine ID in der“ angibt “GetElementById ()"Methode und dann die Hintergrundfarbe auf" festlegen "Rosa”:

Funktion color ()
var input = Dokument.GetElementById ('txt');
Eingang.Stil.HintergrundColor = 'Pink';

Ausgang

Das obige GIF zeigt, dass die Hintergrundfarbe des Eingabefeldes geändert wird, wenn die Schaltfläche klickt.

Bonuspipp
Sie können auch die „verwenden“RGB”Werte, um die Hintergrundfarbe wie folgt zu ändern:

Eingang.Stil.BIGINGCOLOR = 'RGB (' + 233 + ',' + 185+ ',' + 193 + ')';

Ausgang

Wir haben die Anweisungen zum Ändern der Hintergrundfarbe eines Eingabefeldes mit JavaScript gesammelt.

Abschluss

Verwenden Sie die „Hintergrundfarbe eines Eingangsfeldes“, um die “zu verwendenStil.Hintergrund”CSS -Eigenschaft. Mit dieser Eigenschaft können Sie die Farbe des Hintergrundattributs mit dem RGB -Farbcode oder dem Farbnamen festlegen. Dieser Beitrag definierte die Methode zum Ändern der Hintergrundfarbe eines Eingabefeldes mit JavaScript.