ユーザーがウェブページのフォントサイズを変更できるようにする

Question

ウェブページのテキストのサイズを変更したいのですが、jQueryを使うことができますが、JavaScriptの経験はありません。

もう1つの問題は、Webページがphtmlファイルであり、複数のphpエコーコマンドが使用されていることです。ページは複数のphtmlファイルで構成されています。

編集：ユーザーに異なるフォントサイズの3つの選択肢を与えたいと思います。

Answer 1

Iはかかるアプローチは、スケーリングされたようにサイズを生成EMS、フォントサイズを指定する他のすべての要素のためのHTMLそして

body 
{ 
    font-size: 62.5%; 
} 

のbodyタグにフォントサイズのパーセンテージを適用することです他のフォントを指定すると、例えばサイズとき、ピクセルサイズにこれを翻訳することは容易であるため、継承されたフォントサイズの割合

h1 
{ 
    font-size: 1.8em; 
} 

p 
{ 
    font-size: 1.2em; 
} 

まで私は体に62.5％を使用します1.2em = 12px、1.8em = 18pxなど

ページのフォントサイズをプログラムで変更するには、本文のフォントサイズの値を変更するだけで、ページの残りの部分が拡大されますまたはダウンに応じ

あなたは私はあなたがテキストのサイズを変更する最も簡単な方法は、wが

$(document).ready(function() { 

    $("#sizeUp").click(function() { 

     $("body").css("font-size","70%"); 

    }); 

    $("#normal").click(function() { 

     $("body").css("font-size","62.5%"); 

    }) 

    $("#sizeDown").click(function() { 

     $("body").css("font-size","55%"); 

    }) 
}); 

Answer 2

を行うことができると信じて3つのdivはJQueryで

<div id="sizeUp">bigger text</div> 
<div id="normal">normal text</div> 
<div id="sizeDown">smaller text</div> 

を持っていることによってこれをテストすることができますi css。あなたは、CSSファイルへのアクセス権を持っている場合、あなたはこれでページ上のすべてのテキストのサイズを変更することができます。

* { 
    font-size: 110%; 
    } 

は、あなたのStyles.cssをファイルの先頭に追加し、それがページ上のすべてのテキストに影響を及ぼし、 styles.cssファイルを使用するすべてのテキスト。

Answer 3

これを試してみてください：

<p><a href="#" onclick="document.body.style.fontSize='x-small';">SMALL</a></p> 
<p><a href="#" onclick="document.body.style.fontSize='medium';">MEDIUM</a></p> 
<p><a href="#" onclick="document.body.style.fontSize='x-large';">BIG</a></p> 

Answer 4

だけCTRL- +とCTRL--により、フォントのサイズを変更する（Firefoxで、他のブラウザでは異なる場合があります）

Answer 5

div要素のフォントサイズを大きくし、軽減する方法jqueryを通してコンテンツ？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<div class="data"> 

sghfhj jhkjik jhbjbjbh 
</div> 

<div ><input type="button" value="increase" class="increaseFont"></input></div> 
<div><input type="button" value="decrease" class="decreaseFont"></input></div> 

<script type="text/javascript"> 
$(document).ready(function(){ 
    $(".increaseFont,.decreaseFont").click(function(){ 
    var type= $(this).val(); 
    var curFontSize = $('.data').css('font-size'); 
    alert(curFontSize); 
    if(type=='increase'){ 
    $('.data').css('font-size', parseInt(curFontSize)+1); 
    } 
    else{ 
    $('.data').css('font-size', parseInt(curFontSize)-1); 
    } 
    alert($('.data').css('font-size')); 

    }); 


}); 
</script> 

これは

Answer 6

単にjQueryとHTMLをあなたのテキストのフォントサイズを増加/減少するためのオプションを追加することができます:)取り組んでいます。 divのコンテンツをクラスkickbloggerでラップし、そのdivをターゲットにしてjQueryを使用してフォントサイズを変更する必要があります。このスクリプトを使用します。

<script src=" https://googledrive.com/host/0Bw5Ph-OwuTz6VkJhZmNlX1lJV0k/"> </script> 

これらのボタンを使用します。

<input type="button" id="btnkickplus" value="A +" /> 
<input type="button" id="btnkickminus" value="A -" /> 

• デモ - http://jsfiddle.net/3N4Lf/
• 論文 - 私はかっこいいフォントで、これを使用 http://www.howtokickblogger.com/2013/09/change-text-font-size-on-blogger-using-jquery.html

:)

Answer 7

：

Fontsize: 
<div class="fa fa-search-plus" id="sizeUp"></div> 
<div class="fa fa-search" id="normal"></div> 
<div class="fa fa-search-minus" id="sizeDown"></div> 

とスクリプト：

<script async type="text/javascript"> 
    $(document).ready(function() { 
     $("#sizeUp").click(function(){ 
      var curFontSize = $('.ccm-page').css('font-size'); 
      $(".ccm-page").css("font-size",parseInt(curFontSize)+1); 
     }); 

     $("#normal").click(function() { 
      $(".ccm-page").css("font-size","15px"); 

     }) 

     $("#sizeDown").click(function() { 
      var curFontSize = $('.ccm-page').css('font-size'); 
      $(".ccm-page").css("font-size",parseInt(curFontSize)-1); 
     }) 
    }); 
    </script>