如何在 Javascript 中添加对文本大小更改按钮的限制？

Question

我正在开发一个面向老年人的网页。我有两个按钮可以让网页的文本变大或变小。但是，我需要限制文本可以更改的大小，以免弄乱网页。

从文字的起点（12px）开始，应该可以放大两倍，否则会跳出页面。同样从起点来看，文字应该可以缩小一次。我是 Javascript 的新手，所以我不确定该怎么做。如有任何帮助，我们将不胜感激！

我当前的代码：

<script>
function resizeText(multiplier) {
  if (document.body.style.fontSize == "") {
    document.body.style.fontSize = "1.0em";
  }
  document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
}</script>

<input id="plusText" alt="Increase text size" value="Letter size +" type="button" onclick="resizeText(1) "/>
<input id="minusText" alt="Decrease text size" value="Letter size &#8211" type="button" onclick="resizeText(-1) "/>

Answer 1

这是我的方法：

修改：

用户可以增加字体大小最大值 '2em' 和最小值 '1em'

修改函数：

function resizeText(multiplier) {
  if (document.body.style.fontSize == "" || parseFloat(document.body.style.fontSize) <= 1 ) {
    document.body.style.fontSize = "1.2em";    
  }

  if ( document.body.style.fontSize == '2em' && multiplier > 0 ) {
        return false;
  } else {
    document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
  }


}

function resizeText(multiplier) {
  if (document.body.style.fontSize == "" || parseFloat(document.body.style.fontSize) <= 1 ) {
    document.body.style.fontSize = "1.2em";    
  }

  if ( document.body.style.fontSize == '2em' && multiplier > 0 ) {
        return false;
  } else {
    document.body.style.fontSize = parseFloat(document.body.style.fontSize) + (multiplier * 0.2) + "em";
  }
  
  console.log(document.body.style.fontSize);
}

<input id="plusText" alt="Increase text size" value="Letter size +" type="button" onclick="resizeText(1) "/>
<input id="minusText" alt="Decrease text size" value="Letter size &#8211" type="button" onclick="resizeText(-1) "/>



<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>

如何在 Javascript 中添加对文本大小更改按钮的限制？

How to add a limit on a text-size change button in Javascript?

html

javascript

text

button

font-size