jQueryはボタンをクリックするとフォントスタイルを変更します-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

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

PHPz

May 14, 2023 am 10:29 AM

フロントエンドデザインでは、フォントスタイルはページの不可欠な部分です。ユーザーがボタンをクリックしたときにフォントスタイルを変更できるようにしたい場合は、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 ファイルでは、ボタンを押すとフォントスタイルが変わるため、いくつかのスタイルを記述する必要があります。をクリックされます。以下は例です:

.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 コードの例です。




  
  jQuery点击按钮改变字体样式
  
  <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 サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。