字体大小随jquery而变化

时间:2013-08-09 07:39:30

标签: jquery font-size

我有一个页面需要更改字体大小。

这是一个简化的设置:

HTML:

<div class="box">Some dummy text in here</div>
<a href="#" class=".decreaseFont">decrease</a>

<a href="#" class=".increaseFont">increase</a>

JS:

$(document).ready(function () {

    $(".increaseFont").click(function () {
        $(".box").css("font-size", "12px");
    });

    $(".decreaseFont").click(function () {
        $(".box").css("font-size", "11px");
    });

});

CSS:

.box {
    font-size:11px;
    padding:30px;
    border:1px solid red;
}

出于某种原因,我无法确定这是行不通的。 Here is a fiddle也是。

感谢您的时间。

3 个答案:

答案 0 :(得分:1)

检查你的班级名称

class=".increaseFont"

从中删除.

<a href="#" class="decreaseFont">decrease</a>
<a href="#" class="increaseFont">increase</a>

可以使用

选择
$(".decreaseFont")
$(".increaseFont")

或者在选择器中将其转义

<a href="#" class=".decreaseFont">decrease</a>
<a href="#" class=".increaseFont">increase</a>

可以使用

选择
 $(".\\.decreaseFont")
 $(".\\.increaseFont")

<强> Check Fiddle

答案 1 :(得分:1)

这是因为您错误地应用了类名:

<a href="#" class=".decreaseFont">decrease</a>

<a href="#" class=".increaseFont">increase</a>

只需移除fiddle

中的点

答案 2 :(得分:0)

您的班级名称中不应包含点.。它应该是

<a href="#" class="decreaseFont">decrease</a>
<a href="#" class="increaseFont">increase</a>