W3.JS Aggiungi classi a HTML


Aggiungi una classe:

w3.addClass(selector,'class')

Aggiungi più classi:

w3.addClass(selector,'class1 class2 class3...')

Aggiungi classe per ID

Aggiungi la classe "contrassegnata" a un elemento con id="London":

Esempio

<button onclick="w3.addClass('#London','marked')">Add Class</button>


Aggiungi classe per tag

Aggiungi la classe "marcata" a tutti gli elementi <h2>:

Esempio

<button onclick="w3.addClass('h2','marked')">Add Class</button>


Aggiungi classe per classe

Aggiungi la classe "contrassegnata" a un elemento con class="city":

Esempio

<button onclick="w3.addClass('.city','marked')">Add Class</button>


Aggiungi più classi

Per aggiungere più classi a un elemento, separa ciascuna classe con uno spazio.

Aggiungi sia "class1" che "class2" a un elemento con id="London":

Esempio

<button onclick="w3.addClass('#London','class1 class2')">Add Classes</button>

Rimuovere le classi dagli elementi HTML

Rimuovere una classe:

w3.removeClass(selector,'class')

Rimuovere più classi:

w3.removeClass(selector,'class1 class2 class3...')

Rimuovi classe per ID

Rimuovi la classe "contrassegnata" da un elemento con id="London":

Esempio

<button onclick="w3.removeClass('#London','marked')">Remove Class</button>


Rimuovi classe per tag

Rimuovi la classe "contrassegnata" da tutti gli elementi <h2>:

Esempio

<button onclick="w3.removeClass('h2','marked')">Remove Class</button>


Rimuovi classe per classe

Rimuovi la classe "contrassegnata" da tutti gli elementi con class="city":

Esempio

<button onclick="w3.removeClass('.city','marked')">Remove Class</button>


Rimuovi più classi

Per rimuovere più classi da un elemento, separa ciascuna classe con uno spazio.

Rimuovi sia "class1" che "class2" da un elemento con id="London":

Esempio

<button onclick="w3.removeClass('#London','class1 class2')">Remove Classes</button>

Attiva o disattiva la classe degli elementi HTML

Attiva/disattiva una classe (attiva/disattiva):

w3.toggleClass(selector,'class')

Alterna tra due classi:

w3.toggleClass(selector,'property','class','class')

Attiva/disattiva classe per ID

Alterna tra la classe "contrassegnata" di un elemento con id="London":

Esempio

<button onclick="w3.toggleClass('#London','marked')">Toggle</button>


Attiva/disattiva classe per tag

Alterna tra la classe "marcata" di tutti gli elementi <h2>:

Esempio

<button onclick="w3.toggleClass('h2','marked')">Toggle</button>


Alterna classe per classe

Alterna tra la classe "contrassegnata" di tutti gli elementi con class="city":

Esempio

<button onclick="w3.toggleClass('.city','marked')">Toggle</button>


Attiva più classi

Alterna tra il nome della classe "class1" e "class2" di id="Londra:

Esempio

<button onclick="w3.toggleClass('#London','class1','class2')">Toggle</button>