javascript - js中改变字体大小的函数。如何添加缩放限制？

Question

我有函数:

    function changeFontSize(points) {
        var e = document.getElementsByTagName("BODY")[0];
        var style = window.getComputedStyle(e);
        var size = style.getPropertyValue('font-size');
        size = size.replace("px", "");
        size = size * 1;
        size = size + points;
        //if(size <= 0 && size  <= 3){
            e.style.fontSize = size + "px";
            localStorage.setItem("size", size);
        //}
    }

    function saveFontSize() {
        var size = localStorage.getItem("size");
        if (size !== null) {
            var e = document.getElementsByTagName("BODY")[0];
            e.style.fontSize = size + "px", '!important';
        }
    }

    document.addEventListener("DOMContentLoaded", saveFontSize);



<a href="#" onclick="changeFontSize(1);">plus</a>
<a href="#" onclick="changeFontSize(-1);">minus</a>

上面的代码工作正常。上述功能放大和缩小了我网站上的字体大小。

我需要限制这个函数的作用最大为字体大小的3倍。字体大小缩小(降低字体大小)不能小于其原始大小(原始大小)。

怎么做？请帮忙。

Answer 1

您可以存储初始字体大小，然后使用 Math.min和 Math.max :

body.style.fontSize = Math.max(
  initialBodyFontSize, 
  Math.min(
    initialBodyFontSize * 3, 
    getBodyFontSize() + points
  )
) + 'px';

演示(没有通过 localStorage 部分加载/保存，因为这里不可能):

{
  var body = document.querySelector('body');
  var initialBodyFontSize;
  
  // Note: this supposes the body's font size is expressed in px
  function getBodyFontSize() { 
    return parseFloat(window.getComputedStyle(body).getPropertyValue('font-size'));
  }

  function changeBodyFontSize(points) {
    body.style.fontSize = Math.max(
      initialBodyFontSize, 
      Math.min(
        initialBodyFontSize * 3, 
        getBodyFontSize() + points
      )
    ) + 'px';
    console.log(body.style.fontSize);
  }

  document.addEventListener('DOMContentLoaded', function () {
    initialBodyFontSize = getBodyFontSize();
  });
}

<a href="#" onclick="changeBodyFontSize(1);">plus</a>
<a href="#" onclick="changeBodyFontSize(-1);">minus</a>

另请注意，您通常应避免使用 onclick 和类似属性，而更喜欢使用 addEventListener JS 调用关联的 DOM 元素。