Apprendre jQuery

Manipuler le CSS

Dans cette partie, nous verrons les méthodes .addClass(), .removeClass(), .toogleClass() et .css().

API : http://api.jquery.com/addClass/

La méthode .addClass() permet d'ajouter une classe sur l'élément selectionné.

L'exemple suivant ajoute la classe pod à class="box".

<div class="box">…</div>

$('.box').addClass('pod');

Résultat

<div class="box pod">…</div>

Nous pouvons ajouter plusieurs classes en les séparant d'un espace.

$('.box').addClass('pod product');

Résultat

<div class="box pod product">…</div>

Exemple d'ajout de classe au click.

See the Pen .addClass() by Sutterlity (@sutterlity) on CodePen.

API : http://api.jquery.com/removeClass/

La méthode .removeClass() permet de supprimer une classe sur l'élément selectionné.

L'exemple suivant supprime class="box pod".

<div class="box pod">…</div>

$('.box').removeClass();

Résultat

<div>…</div>

Nous pouvons aussi passer le nom d'une classe en paramètres. Par exemple, ici nous supprimons la classe .pod de l'élément class="box pod".

$('.box').removeClass('pod');

Résultat

<div class="box">…</div>

Exemple de supression de class au click.

See the Pen .removeClass() by Sutterlity (@sutterlity) on CodePen.

API : http://api.jquery.com/toggleClass/

La méthode .toggleClass() permet d'ajouter une classe sur l'élément selectionné si elle n'est pas présente et inversement.

L'exemple suivant ajoute la classe .is-active à class="btn" au click, ou la supprime si elle est présente.

$('#a').click(function(){
  $('#b').toggleClass('bg-success');
});

See the Pen .toggleClass() by Sutterlity (@sutterlity) on CodePen.

API : http://api.jquery.com/css/

La méthode .css() affecte les styles CSS à l'élément sélectionné.

Elle agit aussi comme un getter et permet donc d'obtenir la chaîne de caractères de la valeur CSS demandée.

L'exemple suivant ajoute un fond rouge à class="box".

<div class="box">…</div>

$('.box').css('background-color','red');

Résultat

<div class="box" style="background-color: red;">…</div>

Nous pouvons bien sûr ajouter plusieurs styles CSS en même temps sous forme d'un objet avec des paramètres.

$('.box').css({
    'background-color': 'red',
    'font-size': '20px',
    'color': 'yellow'
});

Résultat

<div class="box" style="font-size: 20px; color: yellow; background-color: red;">…</div>

Comme je l'ai expliqué plus haut, nous pouvons obtenir la valeur d'une propriété CSS comme dans l'exemple ci-dessous.

<div class="box">…</div>
<div class="pod">…</div>

.pod { background: red }

$('.box').css('background-color', $('.pod').css('background-color') );

Résultat

<div class="box" style="background-color: red;">…</div>
<div class="pod">…</div>