Come modificare il colore del pulsante su Click in JavaScript

In JavaScript, spesso vogliamo creare pagine Web personalizzate che coinvolgono varie funzionalità per un design attraente. Ad esempio, nel caso di notifica all'utente di qualsiasi operazione di successo, avviso o notifiche di errore. In tali scenari, modificare il colore del pulsante su Click in JavaScript è una caratteristica significativa per attirare l'attenzione dell'utente e avvisarli in anticipo degli avvisi specifici.

Questo articolo discuterà i metodi per modificare il colore di un pulsante su Click in JavaScript.

Come modificare il colore del pulsante su Click in JavaScript?

Per modificare il colore del colore del pulsante al clic in JavaScript, il “stile.colore di sfondo"La proprietà può essere utilizzata con:

• "al clic"Evento
• "indicizzazione"
• "QuerySelector () metodo

Ora passeremo attraverso ciascuna delle metodologie elencate una per una!

Metodo 1: Modifica il colore del pulsante su Click in JavaScript usando l'evento "OnClick"

Lo stile.La proprietà sfondo regola il colore di sfondo dell'elemento specificato usando la codifica a colori. Viene applicato per impostare il colore rispetto ai valori rosso, verde e blu (RGB). Più specificamente, puoi utilizzare il "al clic"In modo tale che quando si fa clic su un pulsante, il codice colore aggiunto verrà applicato come sfondo.

Il seguente esempio spiega chiaramente il concetto indicato.

Esempio

In primo luogo, crea un pulsante con "pulsante" id. Poi aggiungi "al clic"Evento che attiverà il"ButtonColor ()"Funzione quando si fa clic sul pulsante Aggiunto:

Successivamente, dichiara una funzione chiamata "ButtonColor ()". Nella sua definizione, accedi al pulsante utilizzando il documento.Pulsante GeelementById () e applicare lo stile.Proprietà SfondoColor per impostare il colore del pulsante. Puoi assegnare qualsiasi codice colore RGB come sfondo:

L'implementazione di cui sopra mostrerà il seguente output:

Vuoi impostare più di un colore di sfondo su un pulsante? Se sì, segui la sezione successiva!

Metodo 2: Modifica il colore del pulsante su un clic in JavaScript usando l'indicizzazione

"Indicizzazione"È una tecnica applicata per iterare lungo un array o elencare gli elementi specificando i loro indici. Può essere applicato per definire una serie di colori e cambiare il colore del pulsante rispetto agli elementi aggiunti. Più specificamente, è possibile collegare un metodo addEventListener () in questo modo quando si fa clic su un pulsante; Il suo colore di sfondo verrà modificato in base al colore aggiunto.

Guarda il seguente esempio per la dimostrazione.

Esempio

In primo luogo, creeremo un pulsante con "Clicca qui" valore:

Successivamente, il pulsante verrà accessibile specificando il suo ID nel documento.Metodo getElementById ():

Ora, le variabili indice0 e indice1 saranno dichiarate con i valori "0" E "1"Rispettivamente:

Successivamente, una serie di due colori verrà definita e memorizzata in una variabile chiamata "colori":

Finalmente, a "clic"L'evento sarà allegato al pulsante creato invocando il"addEventListener ()" metodo. Questo funzionerà in modo tale che quando si fa clic sul pulsante, verrà invocato il metodo BOCKCCOLOR (), che cambierà il colore di sfondo in base all'indice dei colori aggiunti nell'array:

Come puoi vedere nell'output indicato, quando si fa clic sul pulsante, il colore di sfondo è impostato per la prima volta su “verde" Poi "blu":

Metodo 3: Modifica il colore del pulsante facendo clic su JavaScript utilizzando “Documento.Metodo QuerySelector () "

IL "documento.QuerySelector ()"Il metodo prende il primo elemento corrispondente a un selettore CSS e"addEventListener ()"Il metodo include e applica un evento specifico a un elemento. Questi metodi possono essere utilizzati per accedere all'ID pulsante, aggiungere il gestore dell'evento clicca e impostare il colore di sfondo del pulsante.

Guarda il seguente esempio per la dimostrazione.

Esempio

Nell'esempio seguente, includi un pulsante con il valore specificato come discusso nei metodi precedenti:

Ora, applica il documento.Metodo QuerySelector () per accedere al pulsante con "successo" id:

Infine, applicare l'addeventListener () per aggiungere un gestore di eventi chiamato "clic"Al pulsante e imposta il suo colore su"Verde chiaro"Usando lo stile.Proprietà BackgroundColor:

Produzione

Abbiamo fornito i metodi più semplici per cambiare il colore del pulsante su Click in JavaScript.

Conclusione

Per cambiare il colore del pulsante in JavaScript, è possibile utilizzare lo stile.Proprietà BackgroundColor con il codice colore, che è il valore RGB. Per fare ciò, invoca il documento.metodo getElementById () per accedere al pulsante Creato e quindi eseguire ulteriori operazioni. Il documento.QuerySelector () viene utilizzato anche per lo stesso scopo. Inoltre, la tecnica di indicizzazione può anche essere utilizzata per applicare più colori di sfondo. Questo manuale ha guidato sulla modifica del colore del pulsante su Click in JavaScript.