Jak zmienić kolor przycisku przy kliknięciu w JavaScript

W JavaScript często chcemy tworzyć niestandardowe strony internetowe obejmujące różne funkcje dla atrakcyjnego projektu. Na przykład w przypadku powiadomienia użytkownika o jakiejkolwiek udanej operacji, ostrzeżeniach lub powiadomieniach o błędach. W takich scenariuszach zmiana koloru przycisku przy kliknięciu w JavaScript jest znaczącą funkcją, aby uzyskać uwagę użytkownika i powiadomić go o konkretnych alertach.

W tym artykule omówiono metody zmiany koloru przycisku przy kliknięciu w JavaScript.

Jak zmienić kolor przycisku przy kliknięciu w JavaScript?

Aby zmienić kolor koloru przycisku po kliknięciu w JavaScript, „styl.kolor tła„Własność może być używana z:

• "na kliknięcie" wydarzenie
• "indeksowanie"
• "QuerySelelect () metoda

Teraz przejdziemy przez każdą z wymienionych metodologii jeden po drugim!

Metoda 1: Zmień kolor przycisku po kliknięciu w JavaScript za pomocą zdarzenia „OnClick”

Styl.Tło właściwość Color dostosowuje kolor tła określonego elementu za pomocą kodowania kolorów. Jest stosowany do ustawienia koloru w stosunku do wartości czerwonych, zielonych i niebieskich (RGB). Mówiąc dokładniej, możesz skorzystać z „na kliknięcie”W taki sposób, że po kliknięciu przycisku dodany kod koloru zostanie zastosowany jako tło.

Poniższy przykład wyraźnie wyjaśnia podaną koncepcję.

Przykład

Najpierw utwórz przycisk z „przycisk" ID. Następnie dodaj "na kliknięcie„Wydarzenie, które wywoła„kolor przycisku()”Funkcja po kliknięciu dodanego przycisku:

Następnie zadeklaruj funkcję o nazwie „kolor przycisku()". W swojej definicji uzyskaj dostęp do przycisku za pomocą dokumentu.przycisk GeelementById () i zastosuj styl.Własność tła Color, aby ustawić kolor przycisku. Możesz przypisać dowolny kod koloru RGB jako jego tło:

Powyższa implementacja pokaże następujące dane wyjściowe:

Chcesz ustawić więcej niż jeden kolor tła na przycisku? Jeśli tak, postępuj zgodnie z następną sekcją!

Metoda 2: Zmień kolor przycisku przy kliknięciu JavaScript za pomocą indeksowania

"Indeksowanie”To technika stosowana do iteracji wzdłuż tablicy lub listy, określając ich indeksy. Można go zastosować w celu zdefiniowania zestawu kolorów i zmiany koloru przycisku w odniesieniu do dodanych elementów. Mówiąc dokładniej, możesz dołączyć metodę addEventListener () w taki sposób, że przycisk jest klikany; Jego kolor tła zostanie zmieniony zgodnie z dodanym kolorem.

Spójrz na poniższy przykład demonstracji.

Przykład

Po pierwsze, utworzymy przycisk z „Kliknij tutaj" wartość:

Następnie do przycisku będzie dostępny, określając jego identyfikator w dokumencie.GetElementById () Metoda:

Teraz zmienne index0 i index1 zostaną zadeklarowane o wartości ”0" I "1”Odpowiednio:

Następnie szereg dwóch kolorów zostanie zdefiniowana i przechowywana w zmiennej o nazwie „zabarwienie”:

Wreszcie „A”Kliknij„Wydarzenie zostanie dołączone do przycisku utworzonego, wywołując„addEventListener ()" metoda. Będzie to działać w taki sposób, że po kliknięciu przycisku przyciska się przyciskacolor () zostanie wywołana metoda przycisku, która zmieni kolor tła zgodnie z indeksem dodanych kolorów w tablicy:

Jak widać na danym wyjściu, po kliknięciu przycisku jego kolor tła jest najpierw ustawiony na „zielony" Następnie "niebieski”:

Metoda 3: Zmień kolor przycisku po kliknięciu JavaScript za pomocą „Dokument.Metoda QuerySelelect () ”

„„dokument.QuerySelelect ()„Metoda pobiera pierwszy element pasujący do selektora CSS i„addEventListener ()”Metoda obejmuje i stosuje określone zdarzenie do elementu. Te metody można wykorzystać do dostępu do identyfikatora przycisku, dodaj obsługę zdarzeń kliknięć i ustaw kolor tła przycisku.

Spójrz na poniższy przykład demonstracji.

Przykład

W poniższym przykładzie dołącz przycisk o określonej wartości, jak omówiono w poprzednich metodach:

Teraz zastosuj dokument.Metoda QuerySelelect () w celu uzyskania dostępu do przycisku o „powodzenie" ID:

Na koniec zastosuj addEventListener (), aby dodać obsługę zdarzeń o nazwie „Kliknij”Na przycisk i ustaw jego kolor na„Jasnozielony„Korzystanie z stylu.Własność tła Color:

Wyjście

Dostarliśmy najłatwiejsze metody zmiany koloru przycisku przy kliknięciu w JavaScript.

Wniosek

Aby zmienić kolor przycisku w JavaScript, możesz użyć stylu.właściwość tła Kolor z kodem koloru, który jest wartością RGB. Aby to zrobić, przywołaj dokument.GetElementById () Metoda dostępu do utworzonego przycisku, a następnie wykonywania kolejnych operacji. Dokument.querySelelect () jest również używane w tym samym celu. Ponadto technikę indeksowania można również wykorzystać do stosowania wielu kolorów tła. Ta instrukcja prowadziła o zmianie koloru przycisku po kliknięciu w JavaScript.