Jquery增加DIV中HTML内容的字体大小

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.

下面是我用来增加#myContent中所有HTML内容的字体大小的javascript。这里奇怪的是,每当调用increaseFontSize()时,字体大小不会增加,而是会减少。某些善良的灵魂能否就我做错了事提出建议。谢谢。

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.

我在fontSizeStr和fontSize上发出警报。 fontSizeStr读取14,而fontSize读取12.最后一行应将内容更改为12px但不会。字体减少了。

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

[更新]: - 在fontSize的末尾添加了“px”。 - 从“fontSize”更改为“font-size”

4 个解决方案

#1

You need to update

你需要更新

 $("#myContent").css("fontSize", fontSize);

 $("#myContent").css("font-size", fontSize + "px");

#2

please add - in fontSize like font-size

请添加 - 像font-size一样的fontSize

$("#myContent").css("font-size", fontSize + "px");

Use

var fontSizeStr= fontSizeStr.substring(0,fontSizeStr.length-2);

#3

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

#4

Here is your working code of JSFIDDLE.

这是您的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.

在我的localhost中测试,使用html标签,它的工作正常。

#1