字体调整大小不适用于页面刷新答案

【问题标题】：Font Resize is not working on page refresh字体调整大小不适用于页面刷新
【发布时间】：2020-04-26 08:20:30
【问题描述】：

我的页面标题栏有一个 + 和 - 用于增加和减少字体（使用下面的功能）...

这一切正常。我将新的字体大小值存储在 cookie 中。

期望的结果是，如果您 a) 刷新页面，或 b) 转到网站上的不同页面，它会将字体大小设置为存储的大小......但是，情况并非如此。

这是我的代码位...（使用 script.js 文件）

var resize = new Array('.resizable');
$(document).ready(function() {
    resize = resize.join(',');

    var resetFont = $(resize).css('font-size');

    $(".reset").click(function(){
        $(resize).css('font-size', resetFont);
        setFontSizeCookieValue(resetFont);
    });

    //increases font size when "+" is clicked
    $(".increase").click(function(){
        event.preventDefault();  
        changeFontSize(true);
        return false;
    });

    //decrease font size when "-" is clicked
    $(".decrease").click(function(){
        changeFontSize(false);
        return false;
    });

    // set the page font size based on cookie
    setPageInitialFontSize();
});

function setPageInitialFontSize() {
    var currentSize = $(resize).css('font-size');
    if (currentSize !== getFontSize()) changeFontSize();
};

// font size changer
function changeFontSize(increase) {
    var currentFontSize = getFontSize();    //getFontSize gets the cookie value or, if not set, returns 16
    var currentFontValue = parseFloat(currentFontSize, 10);
    var newFontSize = currentFontSize;
    if (increase !== undefined) newFontSize = Math.floor((increase) ? currentFontValue * 1.2 : currentFontValue * 0.8);
    $(resize).css('font-size', newFontSize);
    setFontSizeCookieValue(newFontSize);
};

我没有显示“cookie”代码调用（设置和获取），因为它们可以正常工作，设置/获取 cookie 值。

当您单击 + 或 - 按钮时，它们会使用正确的参数值调用 changeFontSize 函数。当页面加载/刷新时，正在调用 setPageInitialFontSize()...

通过 setPageInitialFontSize，它使用 getFontSize 调用 (19) 测试当前大小 (16px) 并流经 changeFontSize，它完成了它应该做的所有事情，但它就像 $(resize).css('font-size', newFontSize); 这里实际上并没有做任何事情......

所以我可以使用任何帮助来找出为什么这不起作用...

【问题讨论】：

您忽略了currentFontValue 和newFontSize 中的单位，这对font-size 属性无效，因此它将使用您的浏览器/操作系统/设置的默认字体大小，即通常为 16px。见Default unit for font-size?
是的，但是 a) 它仍然适用于增加和减少按钮（它们做同样的事情）并且 b) 当线路是 $(resize).css('font-size', newFontSize + "px"); 时我仍然遇到问题

标签： javascript jquery font-size

【解决方案1】：

我想这就是您想要实现的目标，使用此代码或跟随您的代码只是看看您缺少什么，因为我在您的代码中看不到 cookie 部分，请在此处查看工作代码 https://jsbin.com/wofogejiye/edit?html,js,console,output

     <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
       <title>Increase and Decrease Font Using Jquery and CSS</title>
      <script type="text/javascript" language="javascript" 
     src="http://code.jquery.com/jquery-latest.js"><
        /script>   

          <script type="text/javascript">

      </script>
  </head>
  <body>
      <input type="button" class="increase" value=" + ">
      <input type="button" class="decrease" value=" - "/>
      <input type="button" class="resetMe" value=" = ">
      <div>Click Respected Buttons to Increase or Decrease the Font </div>
  </body>
</html>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script>
  $(document).ready(function(){   

          var originalSize = getFontSizeLocalStorage()        
          // reset    
          $('div').css('font-size', originalSize);         
          $(".resetMe").click(function(){           
          $('div').css('font-size', originalSize);         
          });
        $('div').css('font-size'); 
          // Increase Font Size          
          $(".increase").click(function(){         
          var currentSize = getFontSizeLocalStorage()         
          var currentSize = parseFloat(currentSize)*1.2;          
          $('div').css('font-size', currentSize);
            addToLocalStorage(currentSize)
          return false;          
          });        

          // Decrease Font Size       
          $(".decrease").click(function(){        

          var currentSize =getFontSizeLocalStorage()       
          var currentSize = parseFloat(currentSize)*0.8;        
          $('div').css('font-size', currentSize);   
              addToLocalStorage(currentSize)
          return false;         
          });         
        });

        function addToLocalStorage(fontSize){
        window.localStorage.setItem("fontSize",fontSize)
        }
        function getFontSizeLocalStorage(){
        if( window.localStorage.getItem("fontSize")){
        return window.localStorage.getItem("fontSize")
        }
        return $('div').css('font-size')
        }

</script>

【讨论】：