W3.JS Klassen toevoegen aan HTML


Een klas toevoegen:

w3.addClass(selector,'class')

Voeg meerdere klassen toe:

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

Klasse toevoegen op id

Voeg de "marked" class toe aan een element met id="London":

Voorbeeld

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


Klasse toevoegen op tag

Voeg de "marked" class toe aan alle <h2> elementen:

Voorbeeld

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


Klasse per Klasse toevoegen

Voeg de "marked" class toe aan een element met class="city":

Voorbeeld

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


Meerdere klassen toevoegen

Om meerdere klassen aan een element toe te voegen, scheidt u elke klasse met een spatie.

Voeg zowel "class1" als "class2" toe aan een element met id="London":

Voorbeeld

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

Klassen uit HTML-elementen verwijderen

Een klas verwijderen:

w3.removeClass(selector,'class')

Meerdere klassen verwijderen:

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

Klasse verwijderen op id

Verwijder de "marked" class uit een element met id="London":

Voorbeeld

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


Klasse verwijderen op tag

Verwijder de "marked" class van alle <h2> elementen:

Voorbeeld

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


Klasse voor Klasse verwijderen

Verwijder de "gemarkeerde" klasse uit alle elementen met class="city":

Voorbeeld

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


Meerdere klassen verwijderen

Om meerdere klassen uit een element te verwijderen, scheidt u elke klasse met een spatie.

Verwijder zowel "class1" als "class2" uit een element met id="London":

Voorbeeld

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

Schakel de klasse van HTML-elementen in

Een klas wisselen (aan/uit):

w3.toggleClass(selector,'class')

Wissel tussen twee klassen:

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

Klasse wisselen op id

Schakel tussen de "marked" class van een element met id="London":

Voorbeeld

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


Klasse wisselen op tag

Schakel tussen de "gemarkeerde" klasse van alle <h2> elementen:

Voorbeeld

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


Klasse voor Klasse wisselen

Schakel tussen de "gemarkeerde" klasse van alle elementen met class="city":

Voorbeeld

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


Toggle Meerdere klassen

Wissel tussen de klassenaam "class1" en "class2" van id="London:

Voorbeeld

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