jQueryはボタ​​ンをクリックするとフォントスタイルを変更します

フロントエンド デザインでは、フォント スタイルはページの不可欠な部分です。ユーザーがボタンをクリックしたときにフォント スタイルを変更できるようにしたい場合は、jQuery を使用すると非常に便利です。この記事では、jQuery を使用してボタンをクリックするだけでフォント スタイルを変更する方法を説明します。

#準備

始める前に、次の準備ができていることを確認する必要があります。

jQuery ライブラリの紹介

In HTML ドキュメントでは、jQuery ライブラリを導入する必要があります。 CDN を使用するか、jQuery をローカルにダウンロードしてドキュメントに導入するかを選択できます。以下は CDN の引用例です:

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

CSS スタイルの準備

CSS ファイルでは、ボタンを押すとフォント スタイルが変わるため、いくつかのスタイルを記述する必要があります。をクリックされます。以下は例です:

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

この例では、「.change」という名前のクラスを定義します。このクラスを要素に追加すると、フォント サイズ、太さ、色の変更が適用されます。

手順

クリック イベント リスナーの追加

まず、ボタンのクリックに応答するために、ボタンにクリック イベント リスナーを追加する必要があります。イベント。以下に例を示します。

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

この例では、jQuery セレクターを使用してすべてのボタンを選択し、それらのボタンをクリック イベント リスナーを追加しました。ボタンがクリックされると、リスナー関数内のコードが実行されます。

要素を選択してスタイルを変更する

クリック イベントのリスナー関数では、要素を選択することでボタンをクリックしてフォント スタイルを変更する効果を実現できます。そしてスタイルを変えること。以下に例を示します。

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

この例では、jQuery セレクターを使用してすべての段落要素を選択し、toggleClass メソッドを使用してそれらのクラス名を切り替えます。クラス名が「.change」の場合、すべての段落要素に、以前に定義したスタイルの変更が適用されます。クラス名が削除されると、段落要素は元のスタイルに戻ります。

完全な例

以下は、ボタンをクリックしてフォント スタイルを変更する効果を実現する完全な HTML、CSS、および JavaScript コードの例です。

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


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

この例では、ボタンと 2 つの段落要素をページに追加しました。ボタンをクリックすると、段落要素のフォント サイズ、太さ、色が変わります。

以上がjQueryはボタ​​ンをクリックするとフォントスタイルを変更しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。