如何使用jQuery增加字体大小更改？

嗨，我想用jQuery递增地更改页面的字体大小，我该怎么做

比如：

$('body').css({'font-size':'+.01px'});
$('body').css({'font-size':'-.01px'});

---

您不能这样做，因为字体属性存储为字符串，如果您确定字体大小将以像素为单位，您可以这样做：

var fontSize = $('body').css('font-size').split('px')[0];

var fontInt = parseInt(fontSize) + 1;

fontSize = fontInt + 'px';

这可能需要稍加修改，我只是在没有测试的情况下编写了它。

您可以这样做：

var fontSize = parseInt($("body").css("font-size"));
fontSize = fontSize + 1 + "px";
$("body").css({'font-size':fontSize});

HTML

<input id="btn" type="button" value="Increase font" /> <br />
<div id="text" style="font-size:10px">Font size</div>

---

演示：

这可能取决于jquery的哪个版本，但我使用了以下内容

HTML

<input type="button" id="button" />
<div id="box"></div>

---

用这样的东西

$(document).ready(function() {
    $('id or class of what input').click(function() {
        $('div, p, or span of what font size your increasing').css("font-size", function() {
            return parseInt($(this).css('font-size')) + 1 + 'px';
        });
    });
});

---

使用非px字体大小时要小心——当字体大小为1.142857em时，在解析int时使用Sylvain的代码将导致2px

parseInt（1.142857em）=1

---

1+1+'px'==2px

下面是我如何使用jQuery UI滑块的一个示例

范例

HTML:

JS:

$（文档）.ready（函数（）{
var i=15；
$（“#myBtn”）。单击（函数（）{
如果（i>=0）{
我++
var b=$（“#myText”）.css（{“背景色”：“黄色”，“字体大小”：i}）
}
})
//如果你想减少它
$（“#myBtn2”）。单击（函数（）{
如果（i试试这个：

jQuery("body *").css('font-size','+=1');

此解决方案使用百分比而不是px，并且不需要设置大小，也不需要HTML中的样式头

HTML:

这是针对宽度而非线条高度。从今天起，它在Chrome中也不起作用。不适用于Chrome css（“字体大小”）返回“10px”JSFIDLE对我不起作用，但代码足够好，可以提供帮助。虽然我针对
html
元素，但此代码对我起作用。您还需要将所有字体大小设置为使用
rem
而不是
px
。欢迎使用堆栈溢出！虽然此答案可能是正确和有用的，但它是预先设置的如果您想解释它如何帮助解决问题，请咨询。如果有变化（可能不相关），这在将来尤其有用这导致它停止工作，读者需要理解它曾经是如何工作的。谢谢！尽管它已经写了一段时间了，但这个答案很简洁，并且完全符合我的需要。我不确定为什么这不是最受欢迎的答案——澄清一下，我的意思是，我不是javascript开发人员。
$(document).ready(function() {
    $('id or class of what input').click(function() {
        $('div, p, or span of what font size your increasing').css("font-size", function() {
            return parseInt($(this).css('font-size')) + 1 + 'px';
        });
    });
});

    <div class="container">
  <div class="row">
    <div class="col-md-12">
      <div class="text">
        <h1>Hello, increase me or decrease me!</h1>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-md-12">
      <div id="mySlider"></div>
    </div>
  </div>
</div>

.text h1 {
  color: #333;
  font-family: Arial, sans-serif;
  font-size: 30px;
}

$("#mySlider").slider({
  range: "min",
  min: 30,
  max: 70,
  slide: function(e, u) {
    $(".text h1").css("font-size", u.value + "px"); // We want to keep 30px as "default"
  }

});

    $(document).ready(function () {

        var i = 15;

        $("#myBtn").click(function () {
            if (i >= 0) {
             i++
                var b = $("#myText").css({"background-color": "yellow", "font-size": i})

            }
        })
//If you want to decrease it too
        $("#myBtn2").click(function () {
            if (i <= 500) {

                i--
             var b = $("#myText").css({"background-color": "yellow", "font-size": i})

            }
        })
    })

jQuery("body *").css('font-size','+=1');

<p>This is a paragraph.</p>
<button id="btn">turn up</button>

var size = "100%";
$("#btn").click(function() {
size = parseFloat(size)*1.1+"%";// multiplies the initial size by 1.1
    $("p").css("fontSize", size);// changes the size in the CSS
});