我在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";
});
答案 0 :(得分:1)
这是因为您使用em
,这是字体相对长度。因此,每次增加fontSize时都会增加lineHeth。
除非您添加支持并跟踪增加字体大小的次数,否则您的减少lineHeight的公式将无效。
为了简单起见,请改为使用px
或rem
。