字体调整不适用于页面刷新

Question

我的页面 header 栏有一个 + 和 - 用于增加和减少字体（使用下面的函数）...

一切正常。我将新的字体大小值存储在 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' 代码调用（设置和获取），因为它们正常工作 setting/getting cookie 值。

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

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

所以我可以使用任何帮助来弄清楚为什么这不起作用...

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

字体调整不适用于页面刷新

Font Resize is not working on page refresh

javascript

jquery

font-size