jQuery change le style de police en cliquant sur le bouton

Dans la conception front-end, le style de police fait partie intégrante de la page. Si vous souhaitez permettre à l'utilisateur de modifier le style de police lorsqu'il clique sur un bouton, jQuery est un moyen très pratique de le faire. Dans cet article, nous allons vous montrer comment utiliser jQuery pour modifier le style de police en un seul clic.

Préparation

Avant de commencer, vous devez vous assurer d'avoir effectué les préparations suivantes :

1. Présentation de la bibliothèque jQuery

Dans le document HTML, vous devez présenter la bibliothèque jQuery. Vous pouvez choisir d'utiliser un CDN ou de télécharger jQuery localement et de l'introduire dans le document. Voici un exemple de citation de CDN :

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. Préparer les styles CSS

Dans le fichier CSS, vous devez écrire certains styles car le style de police change lorsque vous cliquez sur le bouton. Voici un exemple :

.change {
  font-size: 20px;
  font-weight: bold;
  color: #00bfff;
}

Dans cet exemple, nous définissons une classe nommée ".change". Lorsque cette classe est ajoutée à un élément, elle appliquera des modifications de taille, d’épaisseur et de couleur de police.

Étapes

1. Ajouter un écouteur d'événement de clic

Tout d'abord, nous devons ajouter un écouteur d'événement de clic sur le bouton pour répondre à l'événement selon lequel le bouton est cliqué. Voici un exemple :

$("button").click(function() {
  // 在此处添加代码 
});

Dans cet exemple, nous avons utilisé un sélecteur jQuery pour sélectionner tous les boutons et ajouté un écouteur d'événement de clic pour eux. Lorsque nous cliquons sur le bouton, nous exécuterons du code dans la fonction d'écoute.

2. Sélectionner des éléments et modifier les styles

Dans la fonction d'écoute de l'événement click, nous pouvons obtenir l'effet de cliquer sur le bouton pour changer le style de police en sélectionnant l'élément et en modifiant le style. Voici un exemple :

$("button").click(function() {
  // 选择元素并改变样式
  $("p").toggleClass("change");
});

Dans cet exemple, nous utilisons le sélecteur jQuery pour sélectionner tous les éléments de paragraphe et utilisons la méthode toggleClass pour basculer leurs noms de classe. Lorsque le nom de la classe est ".change", tous les éléments de paragraphe verront le changement de style défini précédemment appliqué. Lorsque le nom de la classe est supprimé, l’élément de paragraphe retrouvera son style d’origine.

Exemple complet

Ce qui suit est un exemple complet de code HTML, CSS et JavaScript pour obtenir l'effet de changer le style de police en cliquant sur un bouton.

  
  
  
  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        $("p").toggleClass("change");
      });
    });
  </script>


  改变字体样式
  
这是一个段落元素。
  
这是另一个段落元素。

Dans cet exemple, nous avons ajouté un bouton et deux éléments de paragraphe à la page. Lorsque vous cliquez sur le bouton, la taille de la police, l'épaisseur et la couleur de l'élément de paragraphe changent.

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!