我正在尝试用 jQuery 制作一个字体大小更改器。
这个想法是，当你点击一个标签为“a+”的按钮时，指定元素的字体大小会变大1em(所以如果当前字体大小是2em，就会变成3em)，标签会变成“A-”。 当您单击带有标签“a-”的同一按钮时，指定元素的字体大小会减小 1em(因此，如果当前字体大小为 3em，则会变为 2em)，并且标签会变回“a+”。
但是，我只能将字体大小增加/减少到指定值，并且需要一些帮助，使其增加/减少 1em。
这是我当前的 jQuery 代码:
$("#ChangeFontSizeButton").click(function() {
if ($(this).text()=='a+') {
$("p").css("font-size", "1.875em");
$(this).text('a-');
} else {
$("p").css("font-size","0.875em");
$(this).text('a+');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<button type="button" id="ChangeFontSizeButton">a+</button>
<p>Hello, this is a sentence.</p>
</body>
</html>那么，您能否帮助我编写此功能，使其增加(当按钮的标签为“a+”时)或减少(当按钮的标签为“a-”时)指定元素的字体大小1em？
最佳答案
使用 $("p").css("font-size") 我们可以获得当前的字体大小(以像素为单位)。只需将该数字除以 16(将其转换为整数后)，您现在就得到了当前大小(以 em 为单位)。
从那里，只需添加一个，然后设置字体大小。
$("#ChangeFontSizeButton").click(function() {
var em = parseInt($("p").css("font-size")) / 16;
if ($(this).text()=='a+') {
$("p").css("font-size", em+1 + "em");
$(this).text('a-');
} else {
$("p").css("font-size", em-1 + "em");
$(this).text('a+');
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<button type="button" id="ChangeFontSizeButton">a+</button>
<p>Hello, this is a sentence.</p>
</body>
</html>关于javascript - 单击按钮时将字体大小增加或减少 1em，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47736250/