ページのフォント サイズを変更するための JQuery 実装コード (Web ページのフォント サイズをリアルタイムで変更)_jquery

コードをコピーします コードは次のとおりです:

/*
のフォント サイズを拡大または縮小します。ページを元のサイズに戻すには、
HTML ページで 3 つの要素を定義する必要があります。
要素のクラスは、resetFont、increaseFont、および減少Fontです。
このファイルの JQuery イベントで、次のイベントをクリックします。拡大、縮小、元のサイズに戻す 3 つの要素がそれぞれ定義されています。
*/
$(function () {
//フォント サイズを取得します。font-size は html で定義されます。 tag
varoriginalFontSize = $("html" ).css("font-size");
//デフォルトのフォントサイズに戻す
$(".resetFont").click(function () {
$("html").css(" font-size", originalFontSize);
//JavaScript は下向きに実行されません
return
}); /フォントを増やします。要素のクラスは、increaseFont
$(".increaseFont").click(function () {
//現在のフォント サイズの接尾辞 px,pt,pc を取得します
var currentFontSize = $("html").css("font- size");
//現在のフォント サイズを取得し、parseFloat() を float 型に変換し、サフィックスを削除します
var currentFontSizeNumber = parseFloat( currentFontSize);
//新しく定義されたフォント サイズ
var newFontSize = currentFontSizeNumber * 1.1
//スタイル シートを書き換えます
$("html").css("font-size", newFontSize) );
//JavaScript は下向きに実行されません
return
});

//フォントを減少させます。要素のクラスは減少フォントとして定義されます。
$( ".decreaseFont").click(function () {
//現在のフォント サイズの接尾辞 px, pt, pc を取得します
var currentFontSize = $("html").css("font-size");
//現在のフォント サイズを取得し、parseFloat() はサフィックスを削除するために float 型に変換します
var currentFontSizeNumber = parseFloat(currentFontSize);
//フォント サイズを再定義します
var newFontSize = currentFontSizeNumber * 0.9 ;
//スタイルシートを書き換えます
$("html").css( "font-size", newFontSize)
//JavaScript は下向きに実行されません
return
} );
});


Web フォントのリアルタイム サイズ変更、jQuery バージョン

は、Web ページのフォント サイズをタイムリーに変更し、jQuery を導入し、制限を追加します。フォントサイズが指定値に達すると、再度ズームアウト機能が機能しないようにするために、拡大できる最大桁数またはフォントを縮小できる最小回数を設定する必要があるようです。より使いやすくなります。

ウェブページのフォントサイズをタイムリーに変更する、jQuery バージョン <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> </title> <style> * { margin:0; padding:0; } .msg {width:300px; margin:100px; } .msg_caption { width:100%; overflow:hidden; margin-bottom:1px;} .msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;font-size:12px;color:white; } .msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;} </style> <!-- 引入jQuery --> <div class="msg"> <div class="msg_caption"> <span class="bigger">ズームイン</span> <span class="smaller">ズームアウト</span> </div> <div> <p id="para"> これはいくつかのテキストです。これはいくつかのテキストです。 これはいくつかのテキストです。 これはテキストです。 これはいくつかのテキストです。これはいくつかのテキストです。 これは何らかのテキストです。 </p> </div> </div>
[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、 を実行するために更新する必要があります]