jQuery addClass()

jQuery addClass() method – Questo metodo aggiunge una classe (add class) ad un elemento di una pagina web.

Quindi ad esempio, se ho un paragrafo e voglio aggiungere una formattazione diversa dopo un determinato evento, lo posso fare utilizzando il metodo addClass().

La sintassi è dunque questa:

.addClass(nome_classe, funzione (index, classe_corrente) )

Dove il nome_classe specifica una classe da attribuire ad un elemento, mentre funzione specifica una o più classi da aggiungere.

La funzione riceve quindi la posizione dell’indice e il nome della classe corrente (ovvero quella esistente) che può essere opzionale.

Ma facciamo subito degli esempi per capire il funzionamento del metodo addClass().


Esempio 1 di utilizzo di jQuery addClass() method

Cliccate quindi sul pulsante sotto. Noterete che solo il testo del primo paragrafo si modificherà.

Coding Creativo. Questo paragrafo cambierà.

Blog dove trovare articoli sulla programmazione. Questo paragrafo non cambierà.


Sviluppiamo adesso il codice necessario per realizzare questo semplice esempio.

Innanzitutto inseriamo due livelli con il tag div e sotto aggiungiamo un pulsante.

Al livello a cui vogliamo dare una formattazione diversa diamo un id, ad esempio io ho impostato id=”formattazione”.

<div id="formattazione">Coding Creativo. Questo paragrafo cambierà.</div>
<div>Blog dove trovare articoli sulla programmazione. Questo paragrafo non cambierà.</div>
<button id="pulsante">Prova del pulsante</button>

Inseriamo, a titolo d’esempio, un foglio di stile interno alla pagina web in cui impostiamo una classe formatta e in cui specifichiamo la dimensione del testo, il colore e anche il padding.

<style type="text/css">
.formatta {
  font-size: 22px;
  color: #cccccc;
  padding: 10px;
}
</style>

Dopo inseriamo la nostra libreria jQuery.

<script src="https://code.jquery.com/jquery-3.4.0.min.js" type="text/javascript"></script>

Infine inserisco la nostra semplicissima funzione che attiva il cambio del testo al clic del pulsante. Basterà aggiungere al livello con id=”formattazione” la classe formatta che ho creato prima nel foglio di stile interno (potevo scegliere qualsiasi altro nome) .

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("#formattazione").addClass("formatta");
  });
});
</script>
<style>

Questo era il nostro primo esempio su jQuery addClass() method.


Esempio 2

In questo secondo esempio utilizzeremo una funzione per sfruttare il metodo addClass().

Coding Creativo. Primo paragrafo
Coding Creativo. Secondo paragrafo

Inizialmente inseriamo i due paragrafi ed il pulsante su cui attivare l’evento.

<p>Coding Creativo. Primo paragrafo</p>
<p>Coding Creativo. Secondo paragrafo</p>
<button>Aggiungi uno stile ad uno o più paragrafi.</button>

Dopo inseriamo la formattazione che vogliamo generare utilizzando un foglio di stile interno.

<style type="text/css">
.paragrafo_0 {
  color: #cccccc;
  padding:20px;
}
.paragrafo_1 {
  color: #ff0000;
  font-size: 20px;
}
</style>

Poi creiamo il nostro semplicissimo script, utilizzando la funzione.

<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").addClass(function(n){
      return "paragrafo_" + n;
    });
  });
});
</script>

Chiaramente questi sono solo dei semplicissimi esempi realizzati con il jQuery addClass() method, più avanti vedremo altri esempi d’uso.

Alcuni link utili:

Rimuovere attributi agli elementi del DOM con JavaScript

Creare attributi agli elementi

Creare elementi nel dom con javascript

Dom in javascript

Come creare una galleria di immagini con javascript

Utilizzare gli array in javascript

Come creare una calcolatrice con javascript

Validare un form con javascript

Saper utilizzare il metodo getElementById

Esempi di Javascript corfirm

Esempi con Javascript prompt

Alcuni esempi con javascript alert

Tutorial javascript

Autore dell'articolo: Cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *