javascript - 文字字体调整

Question

我在完成字体增加/减少 jquery 函数时遇到了问题。它有 3 种尺寸:大、中(默认一个)和小。这里的问题是没有网络上许多示例中的“重置”按钮，而只有两个按钮来增加或减小字体大小。

当我换成更大的字体，我想减少到中间的字体时，问题就出现了。它不会回到中间，而是变为较小的值或向后(从小到大)。有什么办法可以做到这一点？如果您能给我任何帮助，我将不胜感激，谢谢

Answer 1

这是我使用的:

<script>
$(document).ready(function() { 
  var size = $('#container').css('font-size'); 
  $("#largeFont").click(function(){ 
      $('#container').css('font-size', '30px');
      return false; 
  });
  $("#resetFont").click(function(){ 
      $('#container').css('font-size', size);
      return false; 
  });
  $("#increaseFont").click(function() { 
      var size = $('#container').css('font-size');
      $('#container').css('font-size', parseInt(size)+2); 
      return false;
  });
  $("#decreaseFont").click(function() { 
      var size = $('#container').css('font-size');
      $('#container').css('font-size', parseInt(size)-2); 
      return false;
  }); 
  $("#smallFont").click(function(){ 
      $('#container').css('font-size', '10px');
      return false; 
  });
});

</script>

在 HTML 中(在本例中，我使用增加、减少和重置)但您可以设置自定义字体。

<a id="largeFont">Large Font</a> - 
<a id="increaseFont">Increase Font</a> - 
<a id="decreaseFont">Decrease Font</a> - 
<a id="smallFont">Small Font</a> - 
<a id="resetFont">Reset</a>

<div id="container">
 Here's some text
</div>

这是 JSFiddle