文字字体调整大小

Question

我有麻烦得到字体增加/减少jquery功能完成。它有3种尺寸：大，中（默认）和小。这里的问题是没有“重置”按钮，因为它在网上的许多例子，而不是两个按钮来增加或减少字体大小。

问题就来了，当我以更大的字体，我想drecrease到中间的一个。它不会回到中间，它会变成较小的值或向后（从小到大）。有什么办法可以做到这一点？我要感谢所有帮助您可以给我，谢谢

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

一般来说，如果你想三种字体大小，我建议不使用按钮来增加和减少字体大小。我建议您改为为用户提供字体大小的示例，并且可以点击他们想要的字体。举个例子，看看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 3

我创建了一个实际的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, 
      si*imum: 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.si*imum); 
      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.si*imum); 
      $(opt.buttonReset).prop("disabled", (size == opt.sizeDefault)); 
      $.cookie('font-size', size); 
     } 
    }; 
})(jQuery); 

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