Come cambiare l'attributo di stile di un elemento in modo dinamico usando JavaScript?

Il Modello Object Document (DOM) fornisce una funzione per controllare gli stili in modo dinamico nello sviluppo web. Ad esempio, si integra con JavaScript per fornire accessibilità alla modifica delle proprietà degli elementi. È utile modificare il colore, lo sfondo e la dimensione del testo in diverse applicazioni del mondo reale. In questo articolo, cambierai gli attributi di stile di un elemento utilizzando JavaScript.

Come modificare dinamicamente l'attributo di stile di un elemento.

È facile modificare l'attributo di stile di un elemento utilizzando JavaScript. Il funzionamento di questa conversione è il seguente. In primo luogo, getelementbyid viene utilizzato per accedere agli elementi degli oggetti del documento. Successivamente, viene creato un pulsante che si verifica se il client lo ha premuto. Pertanto, si accede la proprietà di un elemento specifico e l'utente modifica dinamicamente l'attributo di stile di un elemento.

Sintassi

elemento.stile.PropertyName = "PropertyValue";

Parametri

La descrizione dei parametri è la seguente:

• nome della proprietà: specifica il nome di proprietà come colore, dimensione del carattere, ecc.
• costo dell'immobile: rappresenta il valore da assegnare alla proprietà di un elemento, e, g, "rosso".

Esempio

Un esempio è adattato per modificare il colore del testo accedendo all'attributo di stile di un elemento. Il codice è riportato di seguito considerando il cambiamento dinamico degli attributi di stile.

Codice

Un esempio per modificare le proprietà dinamiche

Benvenuti in JavaScript World "

La descrizione del codice è spiegata in un ordine logico.

• Un pulsante viene creato passando il valore "Premi il bottone".
• UN "PressBtn ()"Il metodo è allegato a questo pulsante che viene attivato quando viene chiamato.
• Dopodiché, il metodo sopra "PressBtn ()"È scritto all'interno tag.
• In questo metodo, Myelement La variabile viene utilizzata per salvare gli attributi dell'elemento.
• Infine, gli attributi di stile di questo elemento vengono modificati dinamicamente quando il PressBtn () il metodo è chiamato.

Produzione

Dopo aver premuto il pulsante "Premi il bottone", IL PressBtn () il metodo viene attivato, il che modifica dinamicamente l'attributo di stile di questo elemento specifico.

Infine, il colore del testo nero di “Benvenuti in JavaScript"Viene modificato in rosso nel browser utilizzando JavaScript PressBtn () metodo.

Conclusione:

Innanzitutto, l'elemento è accessibile utilizzando GetElementById, quindi il documento.stile.La proprietà viene impiegata per modificare l'attributo di stile dell'elemento. Infine, un pulsante è associato e quando questo pulsante ha premuto, lo stile dell'elemento cambia. Questo articolo dimostra il possibile metodo per convertire l'attributo di stile in JavaScript.