logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

Recuperare e modificare gli attributi degli elementi

In questa lezione jQuery, vediamo i diversi metodi per recuperare il contenuto degli attributi di un elemento, aggiungere un attributo, modificarlo o rimuoverlo.

I metodi per gli attributi

Ecco i diversi metodi jQuery che si possono utilizzare per gli attributi.

MetodoDescrizione
.attr() Recupera o aggiunge un attributo all'elemento specificato.
.removeAttr()Rimuove un attributo all'elemento specificato.
.addClass() Aggiunge la classe o le classi all'elemento specificato.
.removeClass() Rimuove la classe o le classi all'elemento specificato.

Vediamo i metodi in dettaglio.

Il metodo .attr()

Il metodo .attr() è utilizzato per ottenere o impostare il valore di un attributo di un elemento o degli elementi HTML specificati.

Sintassi del metodo .attr()

  • Ottenere il valore dell'attributo: $(selettore).attr(nome_attributo).
  • Impostare il valore di un attributo: $(selettore).attr(nome_attributo, valore).

Vediamo un esempio con un'immagine HTML (non conosci le immagini? Vai alla lezione HTML specifica):

<img src="foto.jpg" height="100px">

<script>
  // Ottenere il valore dell'attributo src dell'immagine
  var src = $("img").attr("src");
  alert("Valore dell'attributo src:" + src);

  // Impostare il valore di larghezza (width)
  $("img").attr("width", "100px");
</script>

Il metodo .removeAttr()

Il metodo .removeAttr() rimuove un attributo selezionato da un elemento o dagli elementi HTML specificati.

Sintassi del metodo .removeAttr()

  • $(selettore).removeAttr(nome_attributo).

Ecco un esempio con questo metodo:

<img src="foto.jpg" height="100px" alt="Un'immagine di fiori">

<script>
  // Rimuovere l'attributo "alt" dall'immagine
  $("img").removeAttr("alt");
</script>

Il metodo .addClass()

Il metodo .addClass() aggiunge una o più classi all'elemento o agli elementi selezionati.

Sintassi del metodo .addClass():

  • $(selettore).addClass(classe1, classe2, ...).

Vediamo un esempio con .addClass():

<p id="parola">Cagnolino</p>

<script>
  // Aggiungere la classe "evidenziato" al testo #parola
  $("#parola").addClass("evidenziato");
</script>

Il metodo .removeClass()

Il metodo .removeClass() rimuove una o più classi dall'elemento o dagli elementi selezionati.

Sintassi del metodo .removeClass():

  • $(selettore).removeClass(classe1, classe2, ...).

Ecco un esempio con questo metodo:

<p id="parola" class="testo evidenziato">Cagnolino</p>

<script>
  // Rimuovere la classe "evidenziato" dal testo con id=parola
  $("#parola").removeClass("evidenziato");
</script>

Prova!Completa gli spazi vuoti con il testo appropriato.
// Aggiungi a <p> l'attributo style="color:red" con jQuery
<p id="testo"> Un testo di esempio </p>

$("#testo").("", "color:red"); 

Prova!Scegli l'opzione corretta tra quelle elencate.
// Rimuovi la classe "evidenziato"
<p class="evidenziato"> Un testo di esempio </p>

$("p").____("evidenziato");