使用Jquery調整文字大小

Question

我想讓用戶選擇他們想要的字體大小，這只會增加#text的字體大小。 現在，我嘗試了一些其他操作，但似乎沒有任何效果。 我只是想要它，所以可以單擊向上或向下箭頭，並且每次單擊時都將其放大1像素。 但是，只有10-80范圍內，否則會產生錯誤。

我將在下面為html和js發布代碼。 自從我可以使用顏色，字體系列和粗體/斜體按鈕以來，我將繼續努力。

謝謝

HTML / JS

**<select id="font">
    <h2>Font Size</h2>
    <input type="text" name="font" value="15" id="font" /> px
    <br /><span id="sizeWarning"></span>
</select>**



$(document).ready(function() {
  $('#buttonup').click(function(){   
        curSize= parseInt($('#text').css('font-size')) + 2;  if(curSize<=20)
        $('#text').css('font-size', curSize);
        }); 
  $('#buttondown').click(function(){   
        curSize= parseInt($('#text').css('font-size')) - 2;
  if(curSize>=12)
        $('#text').css('font-size', curSize);
        });
 });

Answer 1

做了一個簡單的例子（更新，添加了一些檢查，檢查字體大小只有10-80）：

演示： http : //jsfiddle.net/XfHR7/2/

JS：

$("#up").click(function () {
    var currentSize = $("#text").css("font-size");
    currentSize = currentSize.replace(/[^\d.]/g, "");
    currentSize++;
    if(currentSize < 10 || currentSize > 80){
        alert("Font-size between 10 and 80 only!");
    }
    else {
        $("#text").css("font-size", "" + currentSize + "px");
    }
});

$("#down").click(function () {
    var currentSize = $("#text").css("font-size");
    currentSize = currentSize.replace(/[^\d.]/g, "");
    currentSize--;
    if(currentSize < 10 || currentSize > 80){
        alert("Font-size between 10 and 80 only!");
    }
    else {
        $("#text").css("font-size", "" + currentSize + "px");
    }

});

$("input#inputSize").on("keyup change", function () {
    var newSize = $(this).val();
    if(newSize < 10 || newSize > 80){
        alert("Font-size between 10 and 80 only!");
    }
    else {
        $("#text").css("font-size", "" + newSize + "px");
    }
});

HTML：

<p id="text">Text, yay!</p>
<span id="up">Up</span><br />
<span id="down">Down</span><br />
change size via input: <input id="inputSize" type="number" step="1" value="20" max="80" min="10" />