jquery - 使用 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

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>