Javascript 使用jquery随行高增加descrease字体大小

我想要一些jquery代码，可以增加或减少字体。 我尝试了一些代码，但运行不好

这是我的演示文稿（我是第一次使用小提琴，所以请您根据需要设置）

我这里有不同大小的字体，但在增加字体大小时，它会使所有字体的大小相同。那么如何解决这个问题呢

我的代码：

<div id='contents'><div><strong>Lorem Ipsum</strong> is simply dummy text of the printing and 
typesetting industry. Lorem Ipsum has been the industry's standard dummy
 <div><font face="Comic Sans MS" size="5" color="#c2c2c2">text ever since the 1500s, when an unknown printer took a galley of 
type and scrambled it to make a type specimen book. It has survived not  </font></div><font face="Comic Sans MS" size="5" color="#c2c2c2">
only five centuries, but also the leap into electronic typesetting, 
remaining essentially unchanged. It was popularised in the 1960s with 
the release of Letraset sheets containing Lorem Ipsum </font>passages, and more
 recently with desktop publishing software like <font size="1">Aldus PageMaker 
including versions of  </font><div><font size="1">Lorem Ipsum. </font></div></div></div>
<a href="#" onclick="increaseFont()">increaseFont</a>
<a href="#" onclick="decreaseFont()">decreaseFont</a>
    <script type="text/javascript">
var $ = jQuery
var section = '#contents *';
var originalFontSize = $(section).css('font-size');
var originalLineHeight = $(section).css('line-height');

function resetFont() {
    $(section).css('font-size', originalFontSize);
    $(section).css('font-size', originalLineHeight);
}

function increaseFont() {
    var currentFontSize = $(section).css('font-size');
    var currentLineHeight = $(section).css('line-height');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum * 1.2;
    $(section).css('font-size', newFontSize);
    var currentLineHeightNum = parseFloat(currentLineHeight, 10);
    var newLineHeight = currentLineHeightNum * 0.1;
    $(section).css('line-height', newLineHeight);
    return false;
}

function decreaseFont() {
    var currentFontSize = $(section).css('font-size');
    var currentLineHeight = $(section).css('line-height');
    var currentFontSizeNum = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSizeNum * 0.8;
    $(section).css('font-size', newFontSize);
    var currentLineHeightNum = parseFloat(currentLineHeight, 10);
    var newLineHeight = currentLineHeightNum * 0.8;
    $(section).css('line-height', newLineHeight);
    return false;
}
</script>

Lorem Ipsum只是打印和打印的虚拟文本
排版业。Lorem Ipsum一直是业界的标准假人
从16世纪开始，一个不知名的印刷商在厨房里
打字，然后把它拼凑成一本样书。它没有幸存下来
只有五个世纪，而且是电子排版的飞跃，
基本保持不变。它在20世纪60年代开始流行
包含Lorem Ipsum段落的Letraset表的发布，等等
最近使用了像Aldus PageMaker这样的桌面发布软件
包括Lorem Ipsum的版本。
var$=jQuery
变量部分=“#内容*”；
var originalFontSize=$（section.css（'font-size'）；
var originalLineHeight=$（section.css（'line-height'）；
函数resetFont（）{
$（section.css（'font-size'，originalFontSize））；
$（section.css（'font-size'，originalLineHeight））；
}
函数增量字体（）{
var currentFontSize=$（section.css（'font-size'）；
var currentLineHeight=$（section.css（'line-height'）；
var currentFontSizeNum=parseFloat（currentFontSize，10）；
var newFontSize=currentFontSizeNum*1.2；
$（section.css（'font-size'，newFontSize）；
var currentLineHeightNum=parseFloat（currentLineHeight，10）；
var newLineHeight=currentLineHeightNum*0.1；
$（section.css（'line-height'，newLineHeight）；
返回false；
}
函数decreaseFont（）{
var currentFontSize=$（section.css（'font-size'）；
var currentLineHeight=$（section.css（'line-height'）；
var currentFontSizeNum=parseFloat（currentFontSize，10）；
var newFontSize=currentFontSizeNum*0.8；
$（section.css（'font-size'，newFontSize）；
var currentLineHeightNum=parseFloat（currentLineHeight，10）；
var newLineHeight=currentLineHeightNum*0.8；
$（section.css（'line-height'，newLineHeight）；
返回false；
}

主要问题是调用$（section）.css（），它返回单个值（16px），但将其应用于所有节。让代码正常工作并不困难-您要做的是调用$（section），但使用.each（）循环遍历每个节并以这种方式更新值

我已经更新了你的小提琴，它更新了increaseFont函数来说明解决方法。希望这能帮助你

我所做的改变是：

function increaseFont() {
    $(section).each(function(idx, el){
        var currentFontSize = $(this).css('font-size'),
            currentLineHeight = $(this).css('line-height'),
            currentFontSizeNum = parseFloat(currentFontSize, 10),
            newFontSize = currentFontSizeNum * 1.2;

        $(this).css('font-size', newFontSize);

        var currentLineHeightNum = parseFloat(currentLineHeight, 10),
            newLineHeight = currentLineHeightNum * 0.1;

        $(this).css('line-height', newLineHeight);        
    });
}

快乐的JavaScripting