单击按钮更改<；的文本字体大小；车身>；在javascript/css中 要清楚地了解我在做什么，请检查此项或检查以下代码

此示例用于更改h1、h2、p的文本大小

在javascript/css中有没有一种方法可以改变“body”的文本大小，从而改变整个页面的文本

$（文档）.ready（函数（）{
$（“#小”）。单击（函数（事件）{
event.preventDefault（）；
$（“h1”）。设置动画({
“字体大小”：“24px”
});
$（“h2”）。设置动画({
“字体大小”：“16px”
});
$（“p”）。动画({
“字体大小”：“12px”，
“线条高度”：“16px”
});
});
$（“#中”）。单击（函数（事件）{
event.preventDefault（）；
$（“h1”）。设置动画({
“字体大小”：“36px”
});
$（“h2”）。设置动画({
“字体大小”：“24px”
});
$（“p”）。动画({
“字体大小”：“16px”，
“线条高度”：“20px”
});
});
$（“#大”）。单击（函数（事件）{
event.preventDefault（）；
$（“h1”）。设置动画({
“字体大小”：“48px”
});
$（“h2”）。设置动画({
“字体大小”：“30px”
});
$（“p”）。动画({
“字体大小”：“20px”，
“线条高度”：“20px”
});
});
$（“a”）。单击（函数（）{
$（“a”）.removeClass（“选定”）；
$（此）.addClass（“选定”）；
});
});
*{
保证金：0；
填充：0；
字体系列：Arial、Helvetica、无衬线字体；
文字装饰：无；
}
身体{
背景：#e7e7e7；
}
#包装纸{
宽度：400px；
保证金：0自动；
填充：40px；
背景：#fff；
盒影：0.50px 0 rgba（0,0,0,25）；
}
#控制{
浮动：对；
填充：2px；
宽度：25px；
背景：#333；
位置：固定；
利润率：0440像素；
文本对齐：居中；
过渡：25秒放松；
}
#控制{
字体大小：24px；
颜色：#aaa；
显示：块；
字体大小：粗体；
填充物：5px；
}
#控件a：悬停{
颜色：#fff；
背景：#000；
过渡：25秒放松；
}
a、 精选{
背景色：#294C52；
颜色：#fff！重要；
}
#小的{
字体大小：10px！重要；
}
#中等{
字体大小：16px！重要；
}
#大的{
字体大小：20px！重要；
}
.小{
字体大小：75%；
}
h1{
字体大小：36px；
字体大小：粗体；
}
氢{
字体大小：24px；
利润率：10px0；
}
p{
字体大小：14px；
线高：20px；
}

标题
副标题
同侧阴唇是一种特殊的阴唇，它有一种特殊的动物，它是一种直截了当的动物。Lorem ipsum door sit amet，pri ne periculis definiebas，habeo gloriatur有id

如果在除正文以外的任何地方都使用单位“em”的字体大小，则可以更改正文字体大小，其他所有字体大小也将更改



$（文档）.ready（函数（）{
$（'.change fs'）。单击（函数（）{
$（'.body'）.css（'font-size'，$（this.attr（'data-size'））；
});
});
.body{
字体：400 10磅无衬线；
}
h1{
字号：2em；
}
氢{
字号：1.5em；
}
p{
字号：1em；
}

头球，非常大
第二个标题，仍然相当大
普通文本，默认字体大小

10磅
12磅
16磅
20磅
实际上，您可以用一种比您想象的简单得多的方法来实现这一点

通过在正文上设置起始字体大小，您可以设置其他元素的字体大小，以使用相对
em
单位（在本例中为1em=1xbody字体大小，因此如果正文字体大小为14px，则为1em=14px）。然后可以使用Javascript增加/减少正文字体大小，从而影响这些元素的相对字体大小

可以单独使用CSS转换来处理动画


$（文档）.ready（函数（）{
$（“#增加，#减少”）。在（'click'，function（）{//单击可增加或减少
var btn=$（此），
fontSize=parseInt（window.getComputedStyle（document.body，null）.fontSize，0）；//将正文字体大小解析为数字
如果（btn[0].id==“增加”）{//检测正在单击的按钮
fontSize++；//增加基本字体大小
}否则{
fontSize--；//或减少
}
document.body.style.fontSize=fontSize+'px'；//将正文字体大小设置为新值
});
});
正文{
字体大小：14px；
}
h1，
氢{
转换：字体大小200ms；/*设置字体大小更改的动画*/
}
h1{
字体大小：2em；/*h1元素是2x正文字体大小*/
}
氢{
字体大小：1.5em；/*h1元素是正文字体大小的1.5x*/
}

增加+
减少-
标题1
标题2
使用CSS和正文上的附加类来更改基本字体大小可能会更方便？与这些类相关，您还可以在不使用JavaScript/JQuery编码的情况下更改其他元素的大小

HTML

JQuery

$(function() {

    $('.js-font').on('click', function() {
        $('body')
            .attr('class', '')
            .addClass($(this).data('size'));
    });

});

看小提琴

Hop，它会帮你的。
我写了一个jQuery插件来在更复杂的现有网站设计上实现这一点。

body, body.normal {
    font-size: 16px;
}
body.big {
    font-size: 36px;
}
body.small {
    font-size: 12px;
}

$(function() {

    $('.js-font').on('click', function() {
        $('body')
            .attr('class', '')
            .addClass($(this).data('size'));
    });

});