JQueryを使用して訪問者がサイトのフォントのサイズを変更できるようにする方法

jQueryを使用して、webサイトの訪問者にサイトのフォントのサイズを変更できるようにすることができます。 あなたの訪問者は、彼らに最高の読書体験を与え、彼らのレジャーでフォントのサイズを拡大または縮小することができますので、これは、持っている あなたがjQueryに精通していない場合は、jQueryの仕組みの説明については、私たちのjQueryの基本の記事をチェックしてください。

これは、HTML、CSS、jQuery、および出力のデモを表示する対話型のコード表示です。

サイズ変更のためのHTMLの設定

最初にしなければならないことは、jQueryがサイズを変更するかを決定できるようにHTMLを設定することです。 JQueryを参照するためにHTMLドキュメントを装備することに慣れていない場合は、jQueryのためのHTMLの準備をする記事を参照してください。

まず、サイズ変更インターフェイスを追加する必要があります。 心配しないで、これは実際よりも複雑に聞こえます。 これは、webサイトのユーザーがwebページのフォントのサイズを変更するために対話できるものです。 上記の例でわかるように、プラス、マイナス、および単語”reset”として表されるリンクを使用しました。”

<a class="increase">+</a><a class="decrease">-</a><a class="reset">reset</a>

各リンクには、”増加”や”減少”のようなアクションを表すクラスが必要です。”JQueryを追加するときは、これらのクラスを使用して、どのリンクがフォントサイズを増減、またはリセットするかを示します。

次に、サイズ変更可能にしたい要素やセクションを評価します。 セクションの場合は、サイズを変更する一意の領域を指定できるように、クラスを含む<div>を作成することができます。

CodePenのPen jQuery:Resizing Webpage Fontクラスの例(@pairdocs)を参照してください。上記の例では、class=”resizable”を持つ<div>がサイズ変更されるようにマークされていることがわかります。 ただし、すべての<p>要素のサイズを変更する必要があることを指定しない限り、残りの段落は影響を受けません。

サイズ変更のためのjQuery

jQueryはサイズ変更の重い持ち上げを処理します。 JQueryに慣れていない場合は、jQueryの基本の記事をチェックして、共通の概念を理解してください。

最初のステップは$(document)を作成することです。すべてのjQuery文を包み込むready関数。

$(document).ready(function(){//jQuery statements//jQuery statements});

次に、この関数内に入る最初のjQueryステートメントを追加します。

var resize = new Array('element','.class'); resize = resize.join(',');

このステートメントは、サイズ変更に含める要素またはクラスを確立します。 これらの要素/クラスは、変数”resize”に格納されます。”サイズ変更フォントの例を見ると、<p>要素と”resizable”クラスがサイズ変更のために選択されていることがわかります。

影響を受ける要素またはクラスを確立した後、訪問者がサイズ変更インターフェイスと対話するときに実際にフォントサイズを変更するコードを設

フォントサイズをリセットする

“var resize”ステートメントの下に、フォントを元のサイズにリセットするステートメントを追加します。

 var resetFont = $(resize).css('font-size'); $(".reset").click(function(){ $(resize).css('font-size', resetFont); });

このステートメントは、”resize”変数に保存した要素またはクラスを呼び出し、”reset”クラスとのリンクをクリックすると、CSSのfont-size属性は元のサイズに戻ります。

リセット”）。click(function()は、HTMLから”reset”クラスを呼び出します。 これにより、ユーザーが”reset”クラスに関連付けられたテキストと対話するときにjQueryがフォントサイズをリセットできます。 この例では、このテキストは単に”リセット”リンクです。

フォントサイズを増やす

次に、フォントサイズを増やすステートメントを追加する必要があります。 この例では、”increase”クラスを”+”リンクに追加したので、サイズを増やすjQueryアクションを”+”に結びつける必要があります。

この例はちょうどそれを行います。

//specifies that this will affect the "increase" class $(".increase").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the increased font sizevar newFontSize = originalFontNumber*1.2;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });

この例では、このステートメントが”increase”クラスに関連付けられたテキストをクリックするユーザーに依存していることを確認することから始めます。 これはこの例では”+”です。 次の3行は新しい変数を追加します: originalFontSize、originalFontNumber、およびnewFontSize。

originalFontSizeは、CSSから現在のフォントサイズを収集して保存します。 originaFontNumberは、jQueryがそれを読み取ることができるようにこの番号を解析します。 次に、newFontSizeはoriginalFontNumberに格納されている数値を取得し、それに1.2を乗算します。

次に、最後の行がCSSに入り、フォントサイズをnewFontSizeに一致するように変更します。

このシーケンスは、”+”がクリックされるたびに実行されます。

フォントサイズを小さくする

減少文は、前の文と非常によく似ています。 ただし、フォントサイズに元のフォント番号を増やす数値を乗算する代わりに、decreaseステートメントは元のフォント番号に小数を乗算し、それを削減します。

//specifies that this will affect the "decrease" class $(".decrease").click(function(){//creates a variable that holds the current font size var originalFontSize = $(resize).css('font-size');//creates a variable that parses the number var originalFontNumber = parseFloat(originalFontSize, 10);//creates a variable that holds the decreased font size var newFontSize = originalFontNumber*0.8;//changes the font-size in the CSS document $(resize).css('font-size', newFontSize); return false; });});

このシーケンスは、”-“がクリックされるたびに実行されます。 これにより、クリックするたびにフォントサイズが縮小されます。