Come ottenere e modificare gli attributi, le classi e gli stili di Element tramite JavaScript

Spesso, le pagine Web devono cambiare i propri elementi o il modo in cui i loro elementi appaiono a seconda delle azioni o delle scelte dell'utente. Cambiare elementi, attributi, classi e stili di una pagina web è tutto con l'aiuto del Dom (Modello a oggetti documentali). Il DOM è stato impostato come standard su come ogni browser interpreterà la pagina web HTML e come accederà ai diversi elementi sulla pagina web W3C (World Wide Web Consortium).

JavaScript interagisce anche con gli elementi di una pagina HTML usando il DOM e in questo post impareremo come accedere agli elementi HTML con JavaScript e come cambiare i loro attributi, le loro classi e lo stile usando JavaScript.

Quindi, creiamo prima una pagina HTML con vari elementi utilizzando le seguenti righe di codice:

Cambia il mio stile

Cambia il mio attributo

Cambia la mia classe

Queste righe di codice ci forniranno la seguente pagina Web:

Come ottenere elementi in javascript

Prima di guardare come cambiare elementi usando JavaScript, dobbiamo prima sapere come ottenere elementi in JavaScript. Bene, per ottenere il riferimento di Element, possiamo usare una delle varie funzioni fornite da JavaScript come:

• getElementById ()
• getElementByClassName ()
• getElementByName ()
• getElementByTagName ()
• getElementByTaggnamens ()

Sono tutti abbastanza facili da usare e da capire con il loro nome. Supponiamo di avere un elemento all'interno del nostro HTML con un ID di "XYZ", Per accedere ai dati di questo elemento useremmo la seguente riga nel file JavaScript o nel tag di script:

var obj = documento.getElementById ("XYZ");

Allo stesso modo, se stiamo cercando di accedere a un elemento utilizzando il suo nome classe useremmo la funzione getElementByClassName ().

Cambiare stile di un elemento

Guardando il nostro file HTML, sappiamo che il div che dice "cambia il mio stile" ha l'ID di "cambiare stile", Quindi lo accederemo con la seguente riga:

var cs = documento.getElementById ("ChangeStyle");

Ora, che abbiamo il nostro riferimento elemento nella variabile "CS" possiamo accedere alla sua funzione di stile usando il OPERATORE DOT E da lì possiamo cambiare i suoi diversi valori di stile. Ad esempio, se dovessimo cambiare il colore di sfondo in giallo, useremmo la linea:

cs.stile.backgroundColor = "Yellow";

Dopo aver eseguito il file HTML, vedrai il seguente output:

Puoi anche vedere nella foto sopra, che siamo stati in grado di cambiare lo stile dell'elemento.

Cambia la classe di un elemento usando JavaScript

Abbiamo l'elemento con l'ID "ChangeClass" che ha una classe di "Myclass", per cambiare la classe di questo elemento La prima cosa che dobbiamo fare è fare riferimento a questo elemento in JavaScript usando la seguente riga di codice:

var cc = documento.getElementById ("ChangeClass");

Ora che abbiamo il riferimento dell'elemento nella variabile "cc"Possiamo accedere all'attributo delle classi utilizzando il classList () funzione. Per aggiungere una nuova classe "Newclass" nella stessa variabile, possiamo utilizzare la seguente riga di codice:

cc.classlist.Aggiungi ("Newclass");

Se apri la console dello sviluppatore e controlli l'attributo della classe, troverai il seguente risultato:

Come puoi vedere, sei stato in grado di aggiungere un'altra classe all'attributo della classe dell'elemento usando JavaScript. Se si desidera rimuovere una classe già esistente dall'elenco, è possibile utilizzare la seguente riga di codice:

cc.classlist.rimuovere ("myclass");

Dopo aver eseguito la riga sopra, vedrai i seguenti risultati nella console dello sviluppatore:

E eccoti; Sei stato in grado di rimuovere una classe dall'elenco delle classi di un elemento usando JavaScript.

Cambiare l'attributo di Element

JavaScript ha una funzione chiamata "setAttribute"Che consente all'utente di modificare il valore di qualsiasi attributo dell'elemento se può essere un attributo" classe "o un attributo" ID ". Ad esempio, per modificare la classe di un elemento, indiciamo il primo elemento che dice "Modifica il mio attributo, utilizziamo la seguente riga di codice:

var ca = documento.getElementById ("Changeattr");

E poi possiamo usare la funzione "setAttribute" come:

circa.setAttribute ("classe", "ciao");

Ora possiamo osservare questo cambiamento negli strumenti per sviluppatori come

Possiamo anche assegnare i nostri attributi all'elemento usando la funzione, ad esempio, se vogliamo un attributo di "newattr"A questo elemento con un valore di"Fatto", Possiamo aggiungerlo utilizzando la seguente riga di codice:

circa.setAttribute ("newattr", "fatto");

E se osserviamo l'elemento nella console sviluppatore, possiamo vedere il seguente risultato:

Come è chiaro nell'immagine sopra, siamo stati in grado di aggiungere un nuovo attributo chiamato "newattr"Al nostro elemento usando JavaScript.

Conclusione

JavaScript fornisce varie funzionalità e funzioni che ci aiutano a modificare varie proprietà e attributi di un elemento HTML. Tutte queste modifiche a un elemento HTML vengono eseguite con l'aiuto del modello di oggetto document (DOM) mentre JavaScript interagisce con il DOM per alterare le proprietà di un elemento. Oggi, in questo post, abbiamo imparato come possiamo usare JavaScript e ottenere un riferimento a un elemento e poi con l'aiuto di quel riferimento su come possiamo cambiare lo stile di quell'elemento, la classe dell'elemento e come possiamo modificare il attributi dell'elemento. Insieme a queste alterazioni, abbiamo anche imparato come possiamo aggiungere un nuovo attributo di nostra scelta a un elemento HTML.