jQuery フォントサイズを変更するサンプル

nas2021/10/07

jQueryでフォントサイズを変更するサンプルです。cookieありです。

目次

サンプル フォントサイズを変更するサンプル
フォントサイズを変更するコード
クッキーを確認する環境

フォントサイズを変更するサンプル

ボタンを押すとフォントサイズが変わります。

文字サイズを動的に変更します。

 

フォントサイズを変更するコード

上記サンプルのコードです。

<input type="button" value="文字大" id="fontSizeLarge" />
<input type="button" value="文字中" id="fontSizeMiddle" />
<input type="button" value="文字小" id="fontSizeSmall" />
<p id="p1">文字サイズを動的に変更します。</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script>
  const targetElement = "#p1";
  const fontSizeLarge = "24pt";
  const fontSizeMiddle = "16pt";
  const fontSizeSmall = "12pt";

  $(function () {
    setFontSize();
    $("#fontSizeLarge").click(function () {
      setFontSize(fontSizeLarge);
    });
    $("#fontSizeMiddle").click(function () {
      setFontSize(fontSizeMiddle);
    });
    $("#fontSizeSmall").click(function () {
      setFontSize(fontSizeSmall);
    });
  });

  function setFontSize(fontSize) {
    if (fontSize === undefined) {
      fontSize = jQuery.cookie("fontSize");
      if (fontSize === undefined) {
        fontSize = fontSizeMiddle;
      }
    }
    $(targetElement).css("font-size", fontSize);
    $.cookie("fontSize", fontSize, { expires: 1 });
  }
</script>

6行目は、jquery-cookieのプラグインを指定しています。
14行目は、初期表示時に実行される関数です。
15行目からは、押されたボタンによってフォントサイズを指定し関数を呼び出しています。
26行目からは、引数のフォントサイズがあればそれを画面に設定します。
引数がなければクッキーから取得します。
クッキーもなければ30行目でフォントサイズを代入します。
33行目は、指定の場所にフォントサイズを反映します。
34行目は、使用したフォントサイズをクッキーに保存します。
expires:1の1はクッキーは1日保存されるという意味です。

クッキーを確認する環境

クッキーを動かすにはサーバー環境が必要です。
apacheを起動してhtdocs配下にindex.htmlファイルを配置しました。
ブラウザには、「http://localhost:(ポート番号)/index.html」を指定します。

ファイルスキーム(file:///)では動きません。

関連の記事

jquery.cookie.jsでクッキーを操作するサンプル

△上に戻る