Comment ajouter et supprimer des classes CSS aux éléments à l'aide de jQuery ?-tutoriel CSS-php.cn

Comment ajouter et supprimer des classes CSS aux éléments à l'aide de jQuery ?

WBOY

Libérer： 2023-08-28 11:41:11

avant

1281 Les gens l'ont consulté

如何使用 jQuery 添加和删除 CSS 类到元素？

Les cours CSS jouent un rôle clé dans la conception Web et ont un impact significatif sur l'apparence générale d'une page Web. L’esthétique des pages étant de plus en plus valorisée, la personnalisation dynamique des pages Web peut considérablement augmenter leur valeur. Cette tâche peut sembler intimidante au début, mais jQuery permet d'attacher ou d'extraire sans effort des classes CSS à partir de composants HTML à la volée, offrant ainsi un moyen rapide et facile de générer des pages Web interactives et dynamiques. En attachant ou en éliminant des classes CSS, nous pouvons améliorer la personnalisation et la convivialité des pages Web en modifiant la présentation des composants à la volée en fonction des actions de l'utilisateur ou des occurrences de page.

Méthode addClass()

La méthode jQuery intégrée addClass() est utilisée pour fournir de nouveaux attributs pour chaque élément sélectionné. De plus, il peut être utilisé pour modifier les propriétés de l'élément sélectionné.

Grammaire

$('selector').addClass(className);

Copier après la connexion

MéthoderemoveClass()

JQuery fournit une fonction intégrée appelée removeClass(), qui peut être utilisée pour supprimer un ou plusieurs noms de classe d'un élément spécifié.

Grammaire

$(selector).removeClass(className, function(index, currentClassName))

Copier après la connexion

Méthode

Nous utiliserons les méthodes addClass() et removeClass() décrites ci-dessus pour ajouter et supprimer des classes CSS aux éléments respectivement.

Le code ci-dessus est divisé en trois composants : page HTML, feuille de style CSS et enfin script jQuery. Examinons les trois un par un.

La page HTML se compose de trois composants -

tag, qui fera office d'élément sur lequel nous ajouterons ou supprimerons des classes.
Bouton de balise "Ajouter une classe CSS", nous l'utiliserons pour ajouter des classes CSS aux éléments
Bouton de balise "Supprimer la classe CSS", nous l'utiliserons pour supprimer une classe CSS d'un élément.

Venons-en maintenant à la partie CSS, nous utilisons CSS pour styliser le CSS appelé « p-style » qui possède des propriétés spécifiques telles que la couleur d'arrière-plan, le remplissage, la marge, la couleur et l'alignement du texte. Nous utiliserons jQuery pour ajouter et supprimer dynamiquement cette classe des éléments HTML.

Enfin, nous avons travaillé sur les bases de l'attachement et de la suppression de classes CSS dans des scripts. Pour atteindre la polyvalence dans cette tâche, nous utilisons les fonctions addClass() et removeClass() mentionnées précédemment. Nous avons implémenté la fonction addClass() pour attacher dynamiquement la classe "p-style" à l'élément paragraphe. Au lieu de cela, nous avons implémenté la fonction removeClass() pour supprimer dynamiquement la classe « p-style » de l’élément paragraphe. En regardant attentivement le code, nous constatons que nous avons intégré l'utilisation de ces fonctions respectivement dans les événements de clic des boutons "Ajouter une classe CSS" et "Supprimer une classe CSS".

Exemple

Voici le code complet que nous utiliserons dans cet exemple -

<!DOCTYPE html>
<html>
<head>
   <title>How to add and remove CSS classes to an element using jQuery?</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
   <style>
      .p-style{
         background-color: black;
         padding: 3px;
         margin: 2px;
         color: white;
         text-align: center;
      }
   </style>
</head>
<body>
   <h4>How to add and remove CSS classes to an element using jQuery?</h4>
   <div>
      <p>This is some text.</p>
   </div>
   <br/>
   <div>
      <button id="add-class">Add CSS Class</button>
      <button id="remove-class">Remove CSS Class</button> 
   </div>
   <script>
      $(document).ready(function(){
         $('#add-class').click(function(){
            $('p').addClass('p-style');
         })
         $('#remove-class').click(function(){
            $('p').removeClass('p-style');
         })
      })
   </script>
</body>
</html>

Copier après la connexion

Sortie

Le fichier de sortie css class.gif sera inséré ici.

Conclusion

En corollaire, la fonctionnalité et l'esthétique des pages Web peuvent être considérablement améliorées par la possibilité d'attacher ou de détacher dynamiquement des catégories CSS aux composants HTML à l'aide de jQuery. La mise en œuvre de ce langage de script permet aux concepteurs Web de formuler des mises en page Web interactives et visuellement attrayantes, améliorant ainsi l'expérience utilisateur. De plus, la polyvalence et la nature élastique de jQuery en font un outil précieux dans toute entreprise de développement Web, et sa gestion efficace des tâches de manipulation du DOM soulage les développeurs du temps et du travail. Essentiellement, une utilisation intelligente de jQuery pour attacher ou détacher des catégories CSS aux éléments HTML est un moyen simple mais efficace d'obtenir une apparence de page Web sophistiquée et sophistiquée.

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!