Question

这是我的jquery代码。如果您看不到其中的任何缺陷，请在http://jsfiddle.net/J4ZgB/3/感谢此处查看JSfiddle。

$(function(){
    $("#a").click(function(){
        var s=$('#p_content').css("font-size");
        s+=4;
        $('#p_content').css("font-size",s+"px");
    })
})

Answer 1

你有两个错误..固定代码：

$(function(){
    $("#a").click(function(){
        var s = parseInt($('#p_content').css("font-size"), 10);
        s += 4;
        $('#p_content').css("font-size",s+"px");
    })
})

您需要解析字体大小的数值，其中包含“px” - 幸运的是，parseInt取字符串中的第一个数字并将其转换为数字，忽略字符串的其余部分。
您尝试设置ID为p_cont的元素字体（在jsFiddle中），而实际ID为p_content。

Updated jsFiddle

Answer 2

由于s的值为"14px"，因此"14px" + 4 + "px"为"14px4px"，这是无效的CSS。你需要解析“14px”之外的数字，然后才能像数字一样对待它。

你可以在这里看到：http://jsfiddle.net/jfriend00/J4ZgB/2/。只需点击您的链接，查看提醒显示的内容。

您可以使用：

$(function(){
    $("#a").click(function(){
        var item = $('#p_content');
        var s = parseInt(item.css("font-size"), 10);
        s += 4;
        item.css("font-size", s + "px");
    })
})

您可以在此处看到：http://jsfiddle.net/jfriend00/J4ZgB/8/。

仅供参考，我还将jQuery对象保存到局部变量中，而不是在同一代码块中运行两次选择器查询。

Answer 3

你没有把#p_cont写成#p_content

$('#p_cont').css("font-size",s);

应该是

$('#p_content').css("font-size",s);

我添加了parseInt

var s=parseInt($('#p_content').css("font-size"));

演示：http://jsfiddle.net/J4ZgB/9/

总结果：

<强> HTML：

<span id="a">click to make font bigger</span>
<div id="p_content">
Echo apis are created to simulate Ajax calls: /echo/json/ for JSON, http://jsfiddle.net/echo/jsonp/ for JSONP, /echo/html/ for HTML and /echo/xml/ for XML. ...
</div>

<强>脚本：

$(function(){
    $("#a").click(function(){
        var s=parseInt($('#p_content').css("font-size"));
        s+=4;
        $('#p_content').css("font-size",s);
    })
})

Answer 4

试试这个：

$(function(){
    $('#a').click(function(){
        var s = parseInt($('#p_content').css("fontSize"), 10);
        s += 4;
        $('#p_content').css('fontSize', s+'px');
    })
})

Answer 5

当您检索当前字体大小时，会返回一个字符串：

var s = $('#p_content').css("font-size"); //Returns 14px

尝试解析整数值：

var s = parseInt($('#p_content').css("font-size"));

第二个错误是当您尝试第二次获取它时，段落选择器字符串是错误的，它应该说#p_content它说#p_cont。

工作小提琴：http://jsfiddle.net/J4ZgB/11/

一般建议是使用控制台记录更多内容，并检查从函数中获取的值，以便对自己的脚本进行故障排除。

为什么这个简单的jquery代码不会改变字体大小

5 个答案: