Come modificare il valore dell'attributo di un elemento HTML in JavaScript

Le pagine Web sono progettate utilizzando più linguaggi di programmazione. Due di questi linguaggi di programmazione web sono HTML e JavaScript. HTML è un linguaggio web utilizzato per creare la struttura di base delle pagine Web, nel frattempo, JavaScript viene utilizzato per includere contenuti dinamici alle pagine Web per renderle accattivanti. Entrambi hanno caratteristiche distintive diverse che li distinguono. Una di queste funzionalità è HTML Dom. DOM HTML che è l'abbreviazione del modello di oggetti documenti consente a JavaScript di modificare il contenuto degli elementi HTML.

Allo scopo di modificare il valore dell'attributo di un elemento HTML usando JavaScript, HTML DOM fornisce più metodi. Utilizzando questi metodi è possibile modificare il valore dell'attributo di un elemento HTML nei seguenti modi:

1. Utilizzo del metodo getAttribute ()
2. Utilizzo del metodo setAttribute ()

Discutiamo ciascuno di questi in dettaglio.

Ottieni attributo

Come suggerisce il nome, il metodo getAttribute () è quello di estrarre il valore corrente dell'attributo. La sintassi del metodo getAttribute () è la seguente.

Sintassi del metodo getAttribute ()

elemento.getAttribute (attributeName);

Vediamo l'esempio per ulteriori comprensione.

Esempio

Supponiamo che tu voglia modificare il valore dell'attributo SRC dell'elemento.

Il codice sopra mostra un'immagine della natura.

Ora vogliamo cambiare questa immagine del cane in un'immagine del gatto. Usiamo il seguente codice.

L'esempio completo con l'output è mostrato di seguito.

L'immagine della natura viene modificata in Snow Image

Imposta attributo

Per impostare un attributo su un elemento specifico, utilizziamo il metodo setAttribute (). Aggiorna il valore di un attributo esistente su un elemento o imposta un nuovo attributo con un nuovo nome e valore su un elemento se non esiste. La sintassi di questo metodo è la seguente.

Sintassi del metodo setAttribute ()

elemento.setAttribute (attributeName, attributeValue);

Vediamo un esempio per capire meglio il metodo.

Esempio:

Per prima cosa creiamo un pulsante semplice con un'etichetta di "Clicca qui".

clicca qui

Ora dobbiamo selezionare l'elemento e lo faremo usando il suo ID.

var btn = documento.getElementById ("MyBTN");

Ora useremo il metodo setAttribute () per impostare nuovi attributi.

btn.setAttribute ("class", "click-btn");
btn.setAttribute ("abilita", "");

Il codice completo lungo con l'output è mostrato di seguito.

clicca qui

Conclusione

Per modificare il valore dell'attributo di un elemento HTML DOM HTML fornisce due metodi che sono getAttribute () e setAttribute (). Il getAttribute () viene utilizzato per estrarre il valore corrente dell'attributo mentre setAttribute () viene utilizzato per alterare il valore dell'attributo. In questo tutorial entrambi questi metodi sono discussi in dettaglio insieme a esempi adeguati.