Zmień kolor tła pola wejściowego za pomocą JavaScript

Podczas opracowywania stron internetowych większość programistów woli stylizować strony internetowe, zmieniając kolor tekstu, kolor tła strony internetowej lub elementy HTML, takie jak przyciski, pola wejściowe i tak dalej. Aby to zrobić, programiści używają CSS. Może istnieć jednak wymóg dodawania stylizacji do stron internetowych za pomocą JavaScript. W tym celu możesz skorzystać z „styl.tło„Właściwość CSS w kodzie JavaScript.

Ten post zdefiniuje metodę zmiany koloru tła pola wejściowego za pomocą JavaScript.

Jak zmienić kolor tła pola wejściowego za pomocą JavaScript?

Użyj JavaScript „styl.tło„Właściwość CSS, aby zmienić kolor tła dowolnego elementu, na przykład pole wejściowe. Do określenia atrybutu koloru tła wykorzystywana jest jednokologiczna wartość.

Składnia
Postępuj zgodnie z podaną składnią, aby zmienić kolor tła pola wejściowego:

element.styl.tło Color = "Color"

W powyższej składni dodaj kolor za pomocą jego nazwy lub kodu koloru RGB.

Przykład: Zmień kolor tła pola wejściowego na przycisku Kliknij
Najpierw dodaj pole wejściowe i przycisk w pliku HTML za pomocą tagów i znaczników. Dołącz zdarzenie kliknięcia do przycisku, które uwolni funkcję o nazwie „Color ()”, która zmieni kolor pola tekstowego po kliknięciu przycisku:

Zmień kolor tła pola wejściowego na przycisku

Kliknij

Po wykonaniu kodu HTML wyjście będzie następujące:

W pliku JavaScript najpierw zdefiniuj funkcję „kolor”, Które przyniesie pole wejściowe, określając jego identyfikator w„getElementById ()”Metoda, a następnie ustaw kolor tła na„różowy”:

funkcja kolor ()
var input = dokument.getElementById („txt”);
wejście.styl.BackgroundColor = „Pink”;

Wyjście

Powyższy GIF pokazuje, że kolor tła pola wejściowego jest zmieniany po kliknięciu przycisku.

Bonusowa wskazówka
Możesz także użyć „RGB”Wartości, aby zmienić kolor tła w następujący sposób:

wejście.styl.tło color = 'rgb (' + 233 + ',' + 185+ ',' + 193 + ')';

Wyjście

Zebraliśmy instrukcje związane ze zmianą koloru tła pola wejściowego za pomocą JavaScript.

Wniosek

Aby zmienić kolor tła pola wejściowego, użyj „styl.tło„Własność CSS. Korzystając z tej właściwości, możesz ustawić kolor atrybutu tła za pomocą kodu koloru RGB lub nazwy koloru. Ten post zdefiniował metodę zmiany koloru tła pola wejściowego za pomocą JavaScript.