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

Answer 2

我为此创建了一个实际的jquery插件。您可以为自己的大小和按钮类传递自定义设置。它通过https://github.com/carhartl/jquery-cookie

支持cookie

这是我的小提琴：http://jsfiddle.net/skibulk/eh5xr0z3/22/

这是插件：

(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"});

Answer 3

通常，如果您想要三种字体大小，我建议不要使用按钮来增加和减小字体大小。我建议您向用户提供字体大小的示例，他们可以点击他们想要的那个。举个例子，看一下Kindle在Android上的表现（我现在似乎找不到一个好的公开html示例）：http://www.techsavys.info/2011/09/review-on-kindle-for-android-an-ereader-which-beats-all.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，因为这是你想要的）以及增量的大小（注意你可能想要清理这一点）：

$(document).ready(function() { 
  var size = parseInt($('#container').css('font-size').replace("px", ""), 10); 
  var incrementAmount = 4;
  var increments = 1;
  $("#largerFont").click(function(){ 
    var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);    

    $('#container').css('font-size', curSize + incrementAmount);        
    if ((curSize + incrementAmount) >= (size + (incrementAmount * increments))) {
        $("#largerFont").prop("disabled", true);
    }
    $("#smallerFont").prop("disabled", false);

    return false; 
  });
  $("#smallerFont").click(function(){ 
    var curSize = parseInt($('#container').css('font-size').replace("px", ""), 10);    

    $('#container').css('font-size', curSize - incrementAmount);        
    if ((curSize - incrementAmount) <= (size - (incrementAmount * increments))) {
        $("#smallerFont").prop("disabled", true);
    }
    $("#largerFont").prop("disabled", false);

    return false; 
  });
});

以下是适合您的小提琴：http://jsfiddle.net/fordlover49/jbXmE/1/

Answer 4

您可以使用以下脚本：

<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);
    });
}); <

/ script>

有关详细信息，请查看以下页面：https://www.techxplus.com/2019/09/javascript-font-resizer.html

文字字体调整大小

4 个答案: