Javascript 文本字体大小

我无法完成字体增加/减少jquery函数。它有3种尺寸：大、中（默认值）和小。这里的问题是没有“重置”按钮，因为它在网络上的许多例子中，而只是两个按钮来增加或减少字体大小

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

<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>

$（文档）.ready（函数（）{
var size=$（'#container'）.css（'font-size'）；
$（“#大字体”）。单击（函数（）{
$（'#container'）.css（'font-size'，'30px'）；
返回false；
});
$（“#重置字体”）。单击（函数（）{
$（'#container'）.css（'font-size'，size）；
返回false；
});
$（“#递增字体”）。单击（函数（）{
var size=$（'#container'）.css（'font-size'）；
$（'#container'）.css（'font-size'，parseInt（size）+2）；
返回false；
});
$（“#减少字体”）。单击（函数（）{
var size=$（'#container'）.css（'font-size'）；
$（'#container'）.css（'font-size'，parseInt（size）-2）；
返回false；
}); 
$（“#smallFont”）。单击（函数（）{
$（'#container'）.css（'font-size'，'10px'）；
返回false；
});
});

在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>

---

通常，如果您想要三种字体大小，我建议不要使用按钮来增加或减少字体大小。相反，我建议您向用户提供字体大小的示例，用户可以单击自己喜欢的字体。举个例子，看看Kindle是如何在Android上运行的（我现在似乎找不到一个好的公共html示例）：

但是，如果需要按钮，可以执行以下操作：

  <button id="largerFont">Larger Font</button>
  <button id="smallerFont">Smaller Font</button>
  <p id="container">Change the font size of this.</p>

大字体
小字体
更改此文件的字体大小

对于javascript，这里有一个替代方案，允许您设置增量的数量（下面设置为1，因为这是您想要的）以及增量的大小（请注意，您可能需要稍微清理一下）：

$（文档）.ready（函数（）{
var size=parseInt（$（'#container'）.css（'font-size'）.replace（'px'，''），10）；
var增量金额=4；
var增量=1；
$（“#大字体”）。单击（函数（）{
var curSize=parseInt（$（'#container'）.css（'font-size'）.replace（'px'，''），10）；
$（'#container'）.css（'font-size'，curSize+incrementAmount）；
如果（（光标+增量金额）>=（大小+（增量金额*增量）））{
$（“#largerFont”）.prop（“disabled”，true）；
}
$（“#smallerFont”）.prop（“禁用”，false）；
返回false；
});
$（“#smallerFont”）。单击（函数（）{
var curSize=parseInt（$（'#container'）.css（'font-size'）.replace（'px'，''），10）；
$（'#container'）.css（'font-size'，curSize-incrementAmount）；
如果（（curSize-incrementAmount）我为此创建了一个实际的jquery插件。您可以为自己的大小和按钮类传递自定义设置。它通过

这是我的小提琴：

以下是插件：

(function($){
    $.fontSizer = function(options) {
        // Load Options
        var opt = $.extend({
            selector:      "body",
            sizeMaximum:    20,
            sizeDefault:    14,
            sizeMinimum:    10,
            sizeInterval:   2,
            buttonIncrease: ".font-sizer .increase",
            buttonDecrease: ".font-sizer .decrease",
            buttonReset:    ".font-sizer .reset",
        }, options);

        // Initialize
        $(opt.buttonIncrease).click(increase);
        $(opt.buttonDecrease).click(decrease);
        $(opt.buttonReset).click(reset);
        render( $.cookie('font-size') || opt.sizeDefault );

        // Increase Handler
        function increase() {
            size = parseFloat($(opt.selector).css("font-size"));
            size = Math.min(size + opt.sizeInterval, opt.sizeMaximum);
            render(size);
        }

        // Decrease Handler
        function decrease() {
            size = parseFloat($(opt.selector).css("font-size"));
            size = Math.max(size - opt.sizeInterval, opt.sizeMinimum);
            render(size);
        }

        // Reset Handler
        function reset() {
            render(opt.sizeDefault);
        }

        // Render
        function render(size) {
            $(opt.selector).css("font-size", size +"px");
            $(opt.buttonIncrease).prop( "disabled", (size >= opt.sizeMaximum) );
            $(opt.buttonDecrease).prop( "disabled", size <= opt.sizeMinimum );
            $(opt.buttonReset).prop( "disabled", (size == opt.sizeDefault) );
            $.cookie('font-size', size);
        }
    };
})(jQuery);

jQuery.fontSizer({selector:"body"});

（函数（$）{
$.fontSizer=函数（选项）{
//加载选项
var opt=$.extend({
选择器：“主体”，
最大尺寸：20，
故障大小：14，
最小值：10，
大小间隔：2，
按钮增加：“.font sizer.increase”，
按钮减少：“.font sizer.decrease”，
buttonReset:“.font sizer.reset”，
}，选项）；
//初始化
$（可选按钮增加）。单击（增加）；
$（选择按钮减少）。单击（减少）；
$（选择按钮重置）。单击（重置）；
呈现（$.cookie（'font-size'）| | opt.sizeDefault）；
//增加处理器
功能增加（）{
size=parseFloat（$（opt.selector）.css（“字体大小”）；
size=Math.min（size+opt.sizeInterval，opt.sizemax）；
渲染（大小）；
}
//减少处理器
函数减少（）{
size=parseFloat（$（opt.selector）.css（“字体大小”）；
size=Math.max（size-opt.sizeInterval，opt.sizeMinimum）；
渲染（大小）；
}
//重置处理程序
函数重置（）{
渲染（opt.sizedfault）；
}
//渲染
函数渲染（大小）{
$（opt.selector）.css（“字体大小”，大小+“px”）；
$（opt.buttonIncrease.prop（“禁用”，大小>=opt.sizeMaximum））；
$（opt.buttonDecrease）.prop（“已禁用”，大小您可以使用以下脚本：

<script >
$(document).ready(function() {
    $('#plus').click(function() {
        curSize = parseInt($('.post-body').css('font-size')) + 1;

        $('.post').css('font-size', curSize);
    });
    $('#minus').click(function() {
        curSize = parseInt($('.post-body').css('font-size')) - 1;
        if (curSize >= 12)
            $('.post').css('font-size', curSize);
    });
}); <


$（文档）.ready（函数（）{
$（'#plus'）。单击（函数（）{
curSize=parseInt（$（'.post body'）.css（'font-size'））+1；
$（'.post'）.css（'font-size'，光标）；
});
$（'#减'）。单击（函数（）{
curSize=parseInt（$（'.post-body'）.css（'font-size'））-1；
如果（光标>=12）
$（'.post'）.css（'font-size'，光标）；
});
}); <

/脚本>

有关详细信息，请查看页面：
您需要在此处包含一些代码示例以获得答案。听起来您只有一个按钮连接到Big（）和一个按钮连接到Small（），他们应该在三种状态之间上下调整变量，然后将其传递给resize函数。嗨！我已经尝试过了，但是没有重置按钮。只有两个按钮：增加和减少。这些按钮将用于移动到三种大小。我放置了一个
重置
，在JS中使用默认大小，或者您可以如果您需要egL
$（“#container”）.css（'font-size'，'12px'）；
我没有使用您的代码，但它为我提供了解决问题的方法，谢谢！
<script >
$(document).ready(function() {
    $('#plus').click(function() {
        curSize = parseInt($('.post-body').css('font-size')) + 1;

        $('.post').css('font-size', curSize);
    });
    $('#minus').click(function() {
        curSize = parseInt($('.post-body').css('font-size')) - 1;
        if (curSize >= 12)
            $('.post').css('font-size', curSize);
    });
}); <