Question

对于每次点击，我想增加字体大小。

$('#fontplus').each(function('click') {
    var fs = $('#bod').css('font-size');
    $('#bod').css('font-size',fs+1);

});

<div id="fontplus">+</div>

由于让

Answer 1

你可能已经发现，那是行不通的。

$('#fontplus').click(function() {
  var fs = $('#bod').css('fontSize');

现在您拥有当前的字体大小。但是，它是什么？是“12px”吗？或许它是“1.5em”？好吧，假设您控制了它，您需要做的是拆分当前设置然后将新值组合在一起：

  $('#bod').css('fontSize', (parseInt(fs, 10) + 1) + 'px');
});

Answer 2

你真的希望他们能够无限地做到这一点吗？我建议使用3或4个不同的CSS类来表示每个可用的字体大小并使用jQuery进行管理。

其他例子甚至不考虑使用的单位！分？像素？ .css（“font-size”）将返回该值，因此执行++将无效。

$("#fontplus").click(function() {
    switch($("#bod").attr("className"))
    {
        case "large" : /* do nothing */ break;
        case "medium" : $("#bod").removeClass("medium").addClass("large"); break;
        /* do as needed */
    }
});

我会让每个css类看起来像：

.large { font-size: 1.4em; }
.medium { font-size: 1.2em; }
.normal { font-size: 1em; }
.small { font-size: .8em; }

Answer 3

   var bod;
   var fontPlus;
   $(document).ready(function() {
      bod = $('#bod');
      fontPlus = $('#fontPlus');
      fontPlus.click(function() {
         var fontSize = bod.css('font-size');
         var fontSizeNum = parseFloat(fontSize, 10);
         bod.css('font-size', fontSizeNum * 1.2);
      });
   });

更多信息和示例here

Answer 4

您需要处理点击事件：

$('#fontplus').click(function() {
    var fs = $('#bod').css('font-size');
    $('#bod').css('font-size',fs+1);
});

您需要将CSS中的初始字体大小设置为整数值。

每次点击我想用jquery增加字体大小

4 个答案: