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

Question

嗨，我想用jQuery逐步改变页面的字体大小，我该怎么做？

类似于：

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

- Alfred

Answer 1

你可以这样做：

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

这里有一个jsFiddle的示例

- Sylvain

---

在Chrome上无法工作，css('font-size')返回'10px'。 - Radu D

这个 jsfiddle 对我来说无法工作，但是代码足够好以帮助解决问题。 - SPRBRN

这段代码对我有效，尽管我针对的是 html 元素。您还需要将所有字体大小设置为使用 rem 而不是 px。 - Ryan Burney

Answer 2

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

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

var fontInt = parseInt(fontSize) + 1;

fontSize = fontInt + 'px';

那可能需要稍微修改一下，我只是没有测试就写出来了。

- jcvandan

Answer 3

可能会取决于使用的jquery版本，但我已经使用了以下内容。 HTML

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

代码

$(document).ready(function() {
  $("#button").click(function() {
    $("#box").css("width","+=5");
   });
 });

- David Mioduszewski

---

这是针对宽度而非行高的。并且目前在Chrome中无效。 - Michael J. Gray

Answer 4

试试这个：

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

- mukto90

---

谢谢！虽然这篇回答写得有一段时间了，但它简洁明了，正好满足我的需求。不确定为什么这不是最受欢迎的答案 - 澄清一下，我的意思是真诚的; 我不是JavaScript开发人员。 - Robbie Capps

Answer 5

在使用非 px 字号时要小心 -- 当字号为 1.142857em 时，使用 Sylvain 的代码解析整数会导致结果为 2px！

parseInt(1.142857em) == 1

1 + 1 + 'px' == 2px

- nickgeorgiou

Answer 6

使用类似以下的内容。

$(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';
        });
    });
});

- user3321452

Answer 7

HTML

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

JavaScript

$(document).ready(function() {
    $('#btn').click(function() {
        $('#text').css("font-size", function() {
            return parseInt($(this).css('font-size')) + 1 + 'px';
        });
    });
});

演示：http://jsfiddle.net/ynhat/CeaqU/

- Khoa Nguyen

Answer 8

这是一个使用jQuery UI滑块的示例。

示例 此处 HTML：

    <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>

CSS：

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

JS：

$("#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"
  }

});

- maverick

Answer 9

    $(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})

            }
        })
    })

- Imroz Khan

---

欢迎来到Stack Overflow！虽然这个答案可能是正确和有用的，但最好还是在其中包含一些解释，说明它是如何帮助解决问题的。如果在未来出现（可能无关的）更改导致其停止工作，读者需要理解它曾经是如何运作的，那么这样做尤其有用。 - Kevin Brown-Silva

Answer 10

这个解决方案使用百分比而不是像素(px)，并且不需要设置大小或在HTML中添加样式头。

HTML：

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

jQuery：

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

这里是可工作的 jsfiddle

- BrettC