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：

app.js

演示（由于无法在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>和类似的属性，而应该在关联的DOM元素上首选onclick JS调用。

更改js中字体大小的功能。如何增加缩放限制？

1 个答案: