javascript更改字体大小和行距遇到答案

【问题标题】：javascript change font size and line space encounterjavascript更改字体大小和行距遇到
【发布时间】：2015-05-09 14:32:36
【问题描述】：

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

【问题讨论】：

标签： javascript html css

【解决方案1】：

这是因为您使用了em，这是一个字体相对长度。因此，每次增加 fontSize 时也会增加 lineHeigth。

除非添加对增加字体大小的支持并跟踪增加字体大小的次数，否则减少 lineHeight 的公式将不起作用。

为了简单起见，请改用px 或rem。

【讨论】：