文字字體調整大小

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