javascript更改字体大小和行空间相遇

时间:2015-05-09 05:09:27

标签: javascript html css

我在javascript中有4个函数用于增加字体大小和减小字体大小,增加行间距和减少行间距。 这些功能运行良好,如果我增加2倍的字体大小,然后点击减少行空间,行空间将增加!!

我太迷惑了,任何帮助都会受到赞赏。

$('#incFont').on('click', function()
{
    var style = getComputedStyle(document.body);
    if (style.fontSize.match(/px$/) === null)
    {
        document.body.style.fontSize = "1.0em";
    }

    document.body.style.fontSize = (parseFloat(style.fontSize) * 1.2 / 16) + "em";
});

$('#decFont').on('click', function()
{
    var style = getComputedStyle(document.body);
    if (style.fontSize.match(/px$/) === null)
    {
        document.body.style.fontSize = "1.0em";
    }

    document.body.style.fontSize = (parseFloat(style.fontSize) * 0.8 / 16) + "em";
});

$('#incLine').on('click', function()
{
    var style = getComputedStyle(document.body);
    if (style.lineHeight.match(/px$/) === null)
    {
        document.body.style.lineHeight = "1.0em";
    }
    document.body.style.lineHeight = (parseFloat(style.lineHeight) * 1.2 / 16) + "em";
});

$('#decLine').on('click', function()
{
    var style = getComputedStyle(document.body);
    if (style.lineHeight.match(/px$/) === null)
    {
        document.body.style.lineHeight = "1.0em";
    }
    document.body.style.lineHeight = (parseFloat(style.lineHeight) * 0.8 / 16) + "em";
});

jsfiddle

1 个答案:

答案 0 :(得分:1)

这是因为您使用em,这是字体相对长度。因此,每次增加fontSize时都会增加lineHeth。

除非您添加支持并跟踪增加字体大小的次数,否则您的减少lineHeight的公式将无效。

为了简单起见,请改为使用pxrem