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

【问题标题】：Increase or decrease font-size by 1em when clicking button单击按钮时将字体大小增加或减少 1em
【发布时间】：2018-05-23 23:48:03
【问题描述】：

我正在尝试在 jQuery 中制作字体大小更改器。

这个想法是当你点击一个带有标签“a+”的按钮时，指定元素的字体大小会变大1em（所以如果当前的字体大小是2em，它会变成3em），标签会变成“一种-”。当您单击带有标签“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？

【问题讨论】：

标签： javascript jquery font-size

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：