操作CSSjQuery

Une partie très importante de jQuery est la capacité de manipuler le DOM.

jQuery fournit des méthodes efficaces pour manipuler les styles des éléments.

Dans ce chapitre, nous allons expliquer comment ajouter ou supprimer des classes CSS dans le DOM.

jQuery et les opérations CSS

Avec jQuery, nous pouvons manipuler facilement les styles des éléments.

Nous avons les méthodes jQuery suivantes pour les opérations CSS :

• addClass()

• removeClass()

• toggleClass()

• css()

Je vais vous montrer comment utiliser chaque méthode.

Méthode addClass() de jQuery

jQuery addClass()La méthode ajoute une ou plusieurs classes à un élément sélectionné.

L'exemple suivant ajoute une classe au premier élément <p> :

$("button").click(function(){
　　$("p:first").addClass("highlight");
});

On peut ajouter plusieurs classes (séparées par des espaces) à un élément sélectionné, comme indiqué ci-dessous :

$("button").click(function(){
　　$("p:first").addClass("highlight　big");
});

Méthode removeClass() de jQuery

jQuery removeClass()La méthode supprime une ou plusieurs classes d'un élément sélectionné.

L'exemple suivant supprime une classe de tous les éléments <p> :

$("button").click(function(){
　　$("p").removeClass("highlight");
});

On peut supprimer une classe ou plusieurs classes (séparées par des espaces) d'un groupe d'éléments sélectionnés, comme indiqué ci-dessous :

$("button").click(function(){
　　$("p").removeClass("highlight　big");
});

如果在参数中未指定类名，则将删除所有类：

$("button").click(function(){
　　$("p").removeClass();
});

方法toggleClass()jQuery

jQuery toggleClass()方法在添加/删除所选元素中的一个或多个类名称之间切换。

下面的示例在为所有<p>元素添加和删除“ anotherClass”类名称之间切换：

$("button").click(function(){
　　$("p").toggleClass("anotherClass");
});

此方法检查每个元素的指定类名称：

• 如果缺少类名，则添加

• 如果已经设置了类名，则将其删除

方法css()jQuery

jQuery css()方法获取或设置所选元素的一个或多个样式属性。

jQuery css()方法将在下一章中说明。

参考CSSjQuery

有关完整的CSS方法参考，请访问我们的HTMLjQuery / 参考CSS。