jquery définit le style de classe de l'élément-js tutoriel-php.cn

jquery définit le style de classe de l'élément

无忌哥哥

Libérer： 2018-06-29 13:48:11

original

1663 Les gens l'ont consulté

jquery définit le style de classe d'un élément

Méthodes pour définir les styles d'éléments

1 Spécifiez les règles de style de classe à appliquer en définissant l'attribut de classe de la balise

<.> 2 . Définissez directement l'attribut de style de la balise pour réinitialiser le style de l'élément actuel

1. Appliquer le style de classe : addClass()

$(&#39;#pic&#39;).addClass(&#39;circle&#39;)
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;)

Copier après la connexion

2. RemoveClass()

$(&#39;#pic&#39;).removeClass(&#39;circle&#39;)
$(&#39;#pic&#39;).removeClass(&#39;shadow&#39;)
$(&#39;#pic&#39;).removeClass(&#39;circle shadow&#39;)

Copier après la connexion

3. Changement de style automatique : ToogleClass()

Si aucun style de classe n'est ajouté à l'élément actuel, le style de classe spécifié par celui-ci sera automatiquement ajouté.

$(&#39;#pic&#39;).toggleClass(&#39;circle shadow&#39;)

Copier après la connexion

Si un style de classe a été ajouté à l'élément actuel, alors il supprimera le style de classe

Ajoutez d'abord un style de classe à l'élément

$(&#39;#pic&#39;).addClass(&#39;circle&#39;)
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;)

Copier après la connexion

Maintenant, l'opération de suppression est effectuée

$(&#39;#pic&#39;).toggleClass(&#39;circle shadow&#39;)

Copier après la connexion

4. Style de classe de requête : hasClass()

var res = $(&#39;#pic&#39;).hasClass(&#39;circle shadow&#39;) //false
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;) 
var res = $(&#39;#pic&#39;).hasClass(&#39;circle shadow&#39;) //true
if ($(&#39;#pic&#39;).hasClass(&#39;circle shadow&#39;)) {
$(&#39;#pic&#39;).removeClass(&#39;circle shadow&#39;)
} else {
$(&#39;#pic&#39;).addClass(&#39;circle shadow&#39;) 
}

Copier après la connexion

//Afficher les résultats sur la console

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!