W3.JS Ajouter des classes au HTML

❮ Précédent Suivant ❯

Ajouter une classe :

w3.addClass(selector,'class')

Ajoutez plusieurs classes :

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

Ajouter une classe par identifiant

Ajoutez la classe "marked" à un élément avec id="London":

Exemple

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

Ajouter une classe par balise

Ajoutez la classe "marked" à tous les éléments <h2> :

Exemple

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

Ajouter classe par classe

Ajoutez la classe "marked" à un élément avec class="city":

Exemple

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

Ajouter plusieurs classes

Pour ajouter plusieurs classes à un élément, séparez chaque classe par un espace.

Ajoutez à la fois "class1" et "class2" à un élément avec id="London":

Exemple

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

Supprimer les classes des éléments HTML

Supprimer une classe :

w3.removeClass(selector,'class')

Supprimer plusieurs classes :

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

Supprimer la classe par identifiant

Supprimez la classe "marked" d'un élément avec id="London":

Exemple

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

Supprimer la classe par balise

Supprimez la classe "marked" de tous les éléments <h2> :

Exemple

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

Supprimer classe par classe

Supprimez la classe "marked" de tous les éléments avec class="city":

Exemple

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

Supprimer plusieurs classes

Pour supprimer plusieurs classes d'un élément, séparez chaque classe par un espace.

Supprimez à la fois "class1" et "class2" d'un élément avec id="London":

Exemple

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

Basculer la classe des éléments HTML

Activer/Désactiver une classe :

w3.toggleClass(selector,'class')

Basculer entre deux classes :

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

Basculer la classe par ID

Basculer entre la classe "marquée" d'un élément avec id="London":

Exemple

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

Basculer la classe par balise

Basculer entre la classe "marquée" de tous les éléments <h2> :

Exemple

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

Basculer classe par classe

Basculer entre la classe "marqué" de tous les éléments avec class="city":

Exemple

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

Basculer plusieurs classes

Basculer entre le nom de classe "class1" et "class2" de id="London :

Exemple

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

❮ Précédent Suivant ❯