如何使用 jQuery 增加字体大小的变化？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5975403/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to increment font size changes with jQuery?
提问by Alfred
Hi I want to change the font size of the page incrementally with jQuery how do I do that?
嗨，我想用 jQuery 逐步更改页面的字体大小，我该怎么做？
Something like:
就像是：
$('body').css({'font-size':'+.01px'});
$('body').css({'font-size':'-.01px'});
回答by Sylvain
You could do so :
你可以这样做：
var fontSize = parseInt($("body").css("font-size"));
fontSize = fontSize + 1 + "px";
$("body").css({'font-size':fontSize});
回答by jcvandan
You can't do it like that because the font propery is stored as a string, if you are sure the font size will be in pixels you could do it like this:
您不能这样做，因为字体属性存储为字符串，如果您确定字体大小以像素为单位，您可以这样做：
var fontSize = $('body').css('font-size').split('px')[0];
var fontInt = parseInt(fontSize) + 1;
fontSize = fontInt + 'px';
That might need modifying slightly I just wrote it without testing.
这可能需要稍微修改一下，我只是在没有测试的情况下编写了它。
回答by David Mioduszewski
It might depend on which version of jquery, but I have used the following
这可能取决于哪个版本的 jquery，但我使用了以下内容
HTML
HTML
<input type="button" id="button" />
<div id="box"></div>
CODE
代码
$(document).ready(function() {
$("#button").click(function() {
$("#box").css("width","+=5");
});
});
回答by user3321452
Use something like this
使用这样的东西
$(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';
});
});
});
回答by nickgeorgiou
Be careful when using non-px font sizes -- Using Sylvain's code when parsing for an int when the font-size is 1.142857em would result in 2px!
使用非 px 字体大小时要小心——当字体大小为 1.142857em 时，在解析 int 时使用 Sylvain 的代码会导致 2px！
parseInt(1.142857em) == 1
parseInt(1.142857em) == 1
1 + 1 + 'px' == 2px
1 + 1 + 'px' == 2px
回答by YNhat
HTML
HTML
<input id="btn" type="button" value="Increase font" /> <br />
<div id="text" style="font-size:10px">Font size</div>
Javascript
Javascript
$(document).ready(function() {
$('#btn').click(function() {
$('#text').css("font-size", function() {
return parseInt($(this).css('font-size')) + 1 + 'px';
});
});
});
回答by mukto90
Try as the below:
尝试如下：
jQuery("body *").css('font-size','+=1');
回答by BrettC
This solution uses percentages instead of using px and also does not require the size to be set or require style headers in the HTML.
此解决方案使用百分比而不是使用 px，并且也不需要在 HTML 中设置大小或需要样式标题。
HTML:
HTML：
<p>This is a paragraph.</p>
<button id="btn">turn up</button>
jQuery:
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
});
回答by maverick
Here's an example of how I did it with jQuery UI slider.
这是我如何使用 jQuery UI 滑块完成此操作的示例。
Example here
示例在这里
HTML:
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:
CSS：
.text h1 {
color: #333;
font-family: Arial, sans-serif;
font-size: 30px;
}
JS:
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"
}
});
回答by Imroz Khan
$(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})
}
})
})
