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

Posted 2023-02-21

【中文标题】通过两个按钮放大/缩小页面文本[重复]

【英文标题】：Magnify/de-magnify page text via two buttons [duplicate]

【发布时间】：2016-12-30 10:21:13

【问题描述】：

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

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

【参考方案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>