click（）メソッドを使用してウェブページのテキストサイズを増減する

Question

クリック可能なリンクを使用してウェブページ全体のフォントサイズを増減したい。私はリンクをHTMLに入れていますが、私は物事のjQuery側に苦労しています。

HTML

$(document).ready(function() { 
 
    $('#linkIncrease').click(function() { 
 
    modifyFontSize('increase'); 
 
    }); 
 
    $('#linkDecrease').click(function() { 
 
    modifyFontSize('decrease'); 
 
    }); 
 

 
    function modifyFontSize(flag) { 
 
    var divElement = $('.body'); 
 
    var currentFontSize = parseInt(divElement.css('font-size')); 
 
    if (flag == 'increase') currentFontSize += 3; 
 
    else if (flag == 'decrease') currentFontSize -= 3; 
 
    else currentFontSize = 16; 
 
    divElement.css('font-size', currentFontSize); 
 
    } 
 
});

* { 
 
    margin: auto; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    margin: auto; 
 
    padding: 0; 
 
    width: 100%; 
 
    background-color: #d2eaf2; 
 
    overflow: scroll; 
 
    overflow-x: hidden; 
 
    font-family: 'Century Gothic', serif; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> Font-Size: 
 
    <a id="linkIncrease" href="#">Increase</a> 
 
    <a id="linkDecrease" href="#">Decrease</a> 
 
    <a id="linkReset" href="#">Reset</a> 
 
</div>

任意の助けいただければ幸いです。非常に不満を感じる！

Answer 1

このsetFontSize機能を使用すると、ここで任意のCSSセレクタに

var sheet = document.createElement('style'); 

    function setFontSize(selector, px) { 
     sheet.innerHTML = selector + " { font-size: " + px + "px;}"; 
     // remove the previously-added styleSheet if present 
     try {document.body.removeChild(sheet);} catch(e) {} 
     document.body.appendChild(sheet); 
    } 

    var fontSize = 10; 

    $('#linkIncrease').click(function() { 
     fontSize += 3; 
     setFontSize('body', fontSize); 
    } 
    ); 
    $('#linkDecrease').click(function() { 
     fontSize -= 3; 
     setFontSize('body', fontSize); 
    } 

を任意のフォントサイズを設定することができますフィドルです：あなたがユニットを追加した場合、結果は何http://jsfiddle.net/3ora80f6/

Answer 2

サイズ計算？ divElement.css（ 'font-size'、 '' + currentFontSize + 'px'）

また、 '。 body要素（divのクラスが 'body'の場合に使用する '。'）に対応するdivElementを取得します。

Answer 3

var FirstSize=parseInt($("body").css("font-size"),10); 
 
$(".ChangeFont span:last-child").html(FirstSize+"px"); 
 
$(".ChangeFont a").on("click",function(){ 
 
    var ds =parseInt($(this).attr("data-size")); 
 
    $("body").css("font-size",(ds==0?FirstSize:parseInt($("body").css("font-size"),10)+ds)); 
 
    $(".ChangeFont span:last-child").html($("body").css("font-size")); 
 
});

body{background-color: #d2eaf2;} 
 
.ChangeFont{display:flex} 
 
.ChangeFont *{font-size:16px!important;} 
 
.ChangeFont a{ 
 
padding:7px 10px 7px 10px; 
 
margin:5px; 
 
border:1px solid lightgray; 
 
cursor:pointer; 
 
user-select: none; 
 
background-color: #fff; 
 
min-width: 15px; 
 
text-align: center; 
 
border-radius:5px; 
 
} 
 
.ChangeFont a:hover{background-color:#eee;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="ChangeFont"> 
 
<a data-size="1">&#10010;</a> 
 
<a data-size="-1">&#9866;</a> 
 
<a data-size="0">&#8635;</a> 
 
<span>Font Size: </span> <span> </span> 
 
</div> 
 
<p>The chart below assumes you're starting at age 22 with zero dollars invested. It also assumes a 6 percent average annual investment return and various annual salaries. 
 
Keep in mind that the chart does not factor in inflation or salary increases. 
 
Here's how much you would have to set aside to have $1 million by age 50 if you earn: 
 
$40,000: 34.6 percent of your income 
 
$60,000: 23 percent of your income 
 
$80,000: 17.3 percent of your income 
 
$100,000: 13.8 percent of your income 
 
$120,000: 11.5 percent of your income 
 
"There's no doubt that trying to save $1 million in less than 30 years on a $40,000 income is going to be a real challenge," NerdWallet's investing and retirement specialist Andrea Coombes tells CNBC Make It. "Still, the amount you can save is directly tied to how much you spend, so if you can reduce spending enough to save 35 percent of your income, more power to you."</p>

Answer 4

あなたは不一致jqueryのセレクタを持っています。 あなたが...あまりにもリセット用の関数を呼び出すのを忘れ

$(document).ready(function() { 
     $('#linkIncrease').click(function() { 
      modifyFontSize('increase'); 
     } 
     ); 
     $('#linkDecrease').click(function() { 
      modifyFontSize('decrease'); 
     } 
     ); 
     $('#linkReset').click(function() { 
      modifyFontSize('reset'); 
     } 
     ); 

      function modifyFontSize(flag) { 
      var divElement=$('body'); 
      var currentFontSize=parseInt($("body").css('font-size')); 

      if (flag=='increase') 
      currentFontSize +=3; 
      else if 
      (flag=='decrease') currentFontSize -=3;   
      else currentFontSize=16; 

      divElement.css("fontSize", currentFontSize); 
     } 
    } 
    ); 

これは動作するはずです。 http://jsfiddle.net/ewn0Lnog/1/

Pericularly： divElement = $('.body'); "体" は、それはクラスではありません、それはです：

divElement = $('body');