javascript改变字体大小和行间距遇到

Question

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

Answer 1

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

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

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