Javascript 如何使用jquery在单击事件时增加/减少元素字体大小？

我正在为视障人士做一个网站。我有三个按钮：

增加字体

缩小字体

在正常模式下

---

我需要为类

*

单击添加

+2

像素以获得

字体大小

。请帮助我如何用javascript实现它。

事实上，这并不难

CSS:

JavaScript:

// Add the class 'impaired-view' to the body
function enlargeFont() {
    var body = document.querySelector('body');
    body.classList.add('impaired-view');
}

// Remove if not longer necceary
function shrinkFont() {
    var body = document.querySelector('body');
    body.classList.remove('impaired-view');
}

---

document.getElementById（“yourElement”）.style.fontSize=yourValue
HTML、CSS和jQuery:


var size=18；//或者任何你想要的默认数字
$（文档）.ready（函数（）{
$（“#更大”）。单击（函数（）{
$（“p”）.css（“字体大小”，大小+1+“px”）；
大小++；
});
$（“#更小”）。单击（函数（）{
$（“p”）.css（“字体大小”，大小-1+“px”）；
大小--；
});
$（“#更大”）。单击（函数（）{
$（“p”）.css（“字体大小”，大小+2+“px”）；
尺寸+=2；
});
});
p{
字号：18px
}
//或任何您想要的默认号码

一些文本

更大的
更小
更大的
您可以使用来自的示例代码。它使用一个类选择所有元素（您可以将其更改为您想要的任何类型），确定当前字体大小，并为所有这些元素指定较大/较小/默认字体。
代码示例：


$（文档）.ready（函数（）{
$（“#增加BTN”）。单击（函数（）{
var textboxs=$（'.textClass'）；
var fontSize=getCurrentFontSize（文本框）；
css（“字体大小”，字体大小+2）；
});
$（“#递减Btn”）。单击（函数（）{
var textboxs=$（'.textClass'）；
var fontSize=getCurrentFontSize（文本框）；
css（“字体大小”，fontSize-2）；
});
$（“#defaultBtn”）。单击（函数（）{
$（'.textClass'）.css（“字体大小”，12）；
});
});
函数getCurrentFontSize（文本框）{
var fontSize=textboxs.eq（0）.css（“字体大小”）；
返回parseInt（fontSize，10）；
}
.textClass{
字号：2em；
}

文本1
文本2
JQUERY

 size=parseInt($('p').css('font-size'));


    $("#big").on("click",function(){

      size=size+2;
       $("p").css("font-size",size + "px");
    });
    $("#normal").on("click",function(){
      size=14;
       $("p").css("font-size",size + "px");
    });
    $("#small").on("click",function(){
      size=size-2;
       $("p").css("font-size",size+ "px");
    });

HTML

 <p>CLICK ME!</p>
  <button id='big'>BIG</button>
  <button id='normal'>NORMAL</button>
  <button id='small'>SMALL</button>

点击我

大的
正常的
小的

链接
您已经试过什么了吗？提供一些现有的代码，否则没有人会乐意帮助您，这样每次他添加2个像素时，字体大小都不会超过30？是的，您可以，将其置于if条件下：
if（size）
 <p>CLICK ME!</p>
  <button id='big'>BIG</button>
  <button id='normal'>NORMAL</button>
  <button id='small'>SMALL</button>