javascript - 使用jquery增加行高减小字体大小

Question

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

这里是 link我的演示(我是第一次使用 fiddle ，所以请您根据需要进行设置)

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

我的代码:

<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>

Answer 1

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

我已经更新了您的 fiddle ，其中更新了 increaseFont 函数以说明解决方法。希望这对您有所帮助!

http://jsfiddle.net/p4NbG/2/

我所做的改变:

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);        
    });
}

快乐的 JavaScript!