jQuery ändert den Schriftstil beim Klicken auf die Schaltfläche

Beim Frontend-Design ist der Schriftstil ein integraler Bestandteil der Seite. Wenn Sie möchten, dass der Benutzer den Schriftstil ändert, wenn er auf eine Schaltfläche klickt, ist jQuery eine sehr praktische Möglichkeit, dies zu tun. In diesem Artikel zeigen wir Ihnen, wie Sie mit jQuery den Schriftstil per Knopfdruck ändern können.

Vorbereitung

Bevor Sie beginnen, müssen Sie sicherstellen, dass Sie die folgenden Vorbereitungen getroffen haben:

1. Einführung in die jQuery-Bibliothek

Im HTML-Dokument müssen Sie die jQuery-Bibliothek einführen. Sie können ein CDN verwenden oder jQuery lokal herunterladen und es dann in das Dokument einfügen. Das Folgende ist ein Beispiel für das Zitieren von CDN:

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

2. CSS-Stile vorbereiten

In der CSS-Datei müssen Sie einige Stile schreiben, da sich der Schriftstil ändert, wenn auf die Schaltfläche geklickt wird. Hier ist ein Beispiel:

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

In diesem Beispiel definieren wir eine Klasse mit dem Namen „.change“. Wenn diese Klasse einem Element hinzugefügt wird, werden Änderungen an Schriftgröße, -stärke und -farbe vorgenommen.

Schritte

1. Hinzufügen eines Klickereignis-Listeners

Zuerst müssen wir der Schaltfläche einen Klickereignis-Listener hinzufügen, um auf das Ereignis zu reagieren, bei dem auf die Schaltfläche geklickt wird. Hier ist ein Beispiel:

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

In diesem Beispiel haben wir einen jQuery-Selektor verwendet, um alle Schaltflächen auszuwählen, und einen Klickereignis-Listener für sie hinzugefügt. Wenn auf die Schaltfläche geklickt wird, führen wir Code in der Listener-Funktion aus.

2. Elemente auswählen und Stile ändern

In der Listener-Funktion des Klickereignisses können wir den Effekt eines Klickens auf die Schaltfläche zum Ändern des Schriftstils erzielen, indem wir das Element auswählen und den Stil ändern. Hier ist ein Beispiel:

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

In diesem Beispiel verwenden wir den jQuery-Selektor, um alle Absatzelemente auszuwählen, und verwenden die toggleClass-Methode, um ihre Klassennamen umzuschalten. Wenn der Klassenname „.change“ lautet, wird auf alle Absatzelemente die zuvor definierte Stiländerung angewendet. Wenn der Klassenname entfernt wird, wird das Absatzelement auf seinen ursprünglichen Stil zurückgesetzt.

Vollständiges Beispiel

Das Folgende ist ein vollständiges HTML-, CSS- und JavaScript-Codebeispiel, um den Effekt einer Änderung des Schriftstils durch Klicken auf eine Schaltfläche zu erzielen.

  
  
  
  <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>


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

In diesem Beispiel haben wir der Seite eine Schaltfläche und zwei Absatzelemente hinzugefügt. Wenn Sie auf die Schaltfläche klicken, ändern sich Schriftgröße, -stärke und -farbe des Absatzelements.

Das obige ist der detaillierte Inhalt vonjQuery ändert den Schriftstil beim Klicken auf die Schaltfläche. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!