Jquery to increase font size of HTML contents in DIV
Question
Below is the javascript I used to increase the font size of all HTML contents within #myContent. The strange thing here is that whenever increaseFontSize() is invoked, the font size does not get increased, instead it gets reduced. Can some kind souls advise on what I have done wrong. Thank you.
I put up an alert on fontSizeStr and fontSize. fontSizeStr reads 14 while fontSize reads 12. The last line should change the contents to 12px but it does not. The font decreased.
:
:
function increaseFontSize() {
var fontSizeStr = $("#myContent").css('font-size');
var fontSize = parseInt (fontSizeStr,10) + 2;
$("#myContent").css("font-size", fontSize + "px");
}
:
:
:
<div id="myContent">
<html>
:
:
<p>Actual Contents 1</p>
<p>Actual Contents 2</p>
:
:
</html>
</div>
:
:
[Updates] : - Added "px" to the end of the fontSize. - Changed from "fontSize" to "font-size"
4 answers
solution1
1 2015-07-04 12:58:18
You need to update
$("#myContent").css("fontSize", fontSize);
to
$("#myContent").css("font-size", fontSize + "px");
solution2
1 2015-07-04 13:03:37
please add - in fontSize like font-size
$("#myContent").css("font-size", fontSize + "px");
Use
var fontSizeStr= fontSizeStr.substring(0,fontSizeStr.length-2);
solution3
0 2015-07-04 13:00:11
function increaseFontSize() {
var fontSizeStr = $("#myContent").css('font-size');
var fontSize = fontSizeStr.substring(fontSizeStr.length-2, fontSizeStr.length);
var newFontSize = parseInt (fontSize,10) + 2;
$("#myContent").css("font-size", newFontSize + "px");
}
solution4
0 2015-07-04 14:48:08
Here is your working code of JSFIDDLE.
http://jsfiddle.net/alaksandarjesus/xju2xksp/1/
<div id="myContent">
<p>Actual Contents 1</p>
<p>Actual Contents 2</p>
</div>
<button onClick="increaseFontSize()">Click Me</button>
Tested in my localhost, with html tags, its working fine.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.