通过两个按钮放大/缩小页面文本[重复]答案

【问题标题】：Magnify/de-magnify page text via two buttons [duplicate]通过两个按钮放大/缩小页面文本[重复]
【发布时间】：2016-12-30 10:21:13
【问题描述】：

我试图在网上找到解决问题的方法，但徒劳无功。我有两个按钮，一个是 + 符号，另一个是 - 符号。我想允许用户在按下 + 按钮时模拟按下 CTRL 和 + 键以及按下 - 按钮，模拟按下的 CTRL 和 - 键。

非常感谢您的任何帮助，非常感谢。

【问题讨论】：

标签： javascript html

【解决方案1】：

不确定我是否完全理解这个问题，但我过去曾成功使用过这个问题。看看吧：http://jaukia.github.io/zoomooz/

【讨论】：

【解决方案2】：

$(function() {
  
  var step = 0.2;

  $('.larger').click(function() {
    $('body *').each(function() {
      var actualSize = parseInt($(this).css('font-size'), 10);
      var newSize = actualSize / 10 + step;
      $(this).css('font-size', newSize+'rem');
    });
  });
  
  $('.smaller').click(function() {
    $('body *').each(function() {
      var actualSize = parseInt($(this).css('font-size'), 10);
      var newSize = actualSize / 10 - step;
      $(this).css('font-size', newSize+'rem');
    });
  });
  
});

html {
  font-size: 62.5%;
}
body {
  font-size: 1.6rem;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="larger">+</button>
<button class="smaller">-</button>
<h1>TEST</h1>
<p>
  lorem ipsum
</p>

【讨论】：