jQueryはフォントサイズ調整ケースを実装します

この記事では、フォントサイズを調整するためのjQueryの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。

コード：

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta http-equiv="X-UA-compatible" content="IE=edge">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>フォントを設定する</title> 
</head>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">

    $(関数() {
        $("span").click(function() {
            var cssFontSize = $("#para").css("font-size"); //フォント サイズを取得します。 var fontSize = parseFloat(cssFontSize); //フォント サイズの値を取得します。 var unit = cssFontSize.slice(-2); //フォント サイズの単位を取得します。 var className = $(this).attr("class");
            if ("zoomIn" == className) { //フォントを拡大する if (fontSize <= 22) {
                    フォントサイズ += 2;
                }
            } else if ("zoomOut" == className) { //フォントを縮小します if (fontSize >= 12) {
                    フォントサイズ -= 2;
                }
            }
            $("#para").css("font-size", フォントサイズ + 単位); 
        });
    });
     
</スクリプト>   

<!-- CSS -->
<スタイル タイプ="text/css">
    .ズームイン、.ズームアウト {
        背景: 青;
        カーソル: ポインタ;
    }
</スタイル>
</head>

<!-- HTML -->
<本文>
  <div class="msg">
      <div class="msg_caption">
          <span class="zoomIn">ズームイン</span>
          <span class="zoomOut">ズームアウト</span>
      </div>
      <div>
          <p id="para"> 
              jQuery は高速かつ簡潔な JavaScript フレームワークです。Prototype に続くもう 1 つの優れた JavaScript コード ライブラリ (フレームワーク) であり、2006 年 1 月に John Resig によってリリースされました。 <br />
              jQuery の設計原則は「write Less, Do More」であり、より少ないコードでより多くのことを行うことを推奨しています。 <br />
              一般的に使用される JavaScript 機能コードをカプセル化し、HTML ドキュメント操作、イベント処理、アニメーション デザイン、Ajax インタラクションを最適化するためのシンプルな JavaScript デザイン モードを提供します。 <br />
              jQuery のコア機能は、次のようにまとめることができます: ユニークなチェーン構文と短くて明確で多機能なインターフェース、効率的で柔軟な CSS セレクター、および CSS セレクターを拡張する機能。<br />
              便利なプラグイン拡張機構と豊富なプラグインを備えています。 jQuery は、IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+ など、さまざまな主流ブラウザと互換性があります。</p>
      </div>
  </div>
  
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: