单击按钮时将字体大小增加或减少1em

Question

我正在尝试在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-”时）编码此功能？

Answer 1

使用$("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>

Answer 2

最简单的方法是在em中定义所有文本样式，并使用jQuery更改body的基本字体大小。 所有基于em和rem的样式都将继承自该样式

单击按钮时将字体大小增加或减少1em

问题描述

2 个解决方案

解决方案1
2 2017-12-10 05:45:46

解决方案2
0 2017-12-10 05:43:24

单击按钮时将字体大小增加或减少1em

问题描述

2 个解决方案

解决方案1 2 2017-12-10 05:45:46

解决方案2 0 2017-12-10 05:43:24

解决方案1
2 2017-12-10 05:45:46

解决方案2
0 2017-12-10 05:43:24