Question

我正在尝试在jQuery中创建一个字体大小的转换器。

这个想法是当你点击一个带有标签＆＃34; a +＆＃34;的按钮时，指定元素的字体大小会变大1em（所以如果当前字体大小为2em则变为3em），标签将变成＆＃34; a - ＆＃34;。当您单击带有标签＆＃34; a - ＆＃34;的相同按钮时，指定元素的字体大小减少1em（因此，如果当前字体大小为3em则变为2em）并且标签将返回＆＃34; +＆＃34;

然而，我只能将字体大小增加/减少到指定值，并希望有一些帮助使其增加/减少1em。

这是我当前的jQuery代码：

＆＃13;

$("#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+');
  }
});

＆＃13;

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

＆＃13;

那么，你是否能够帮助我以增加（当按钮的标签是＆＃34; a +＆＃34;）或减少（当按钮＆＃39; s标签是＆＃34; a - ＆＃34;）1em指定元素的字体大小？

Answer 1

使用$("p").css("font-size")，我们可以获得当前字体大小（以像素为单位）。只需将该数字除以16（将其转换为整数后），您现在已经获得了当前的大小。

从那里，只需添加一个，然后设置字体大小。

$("#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的样式都将继承自

单击按钮

2 个答案: