Fatal编程技术网
  • javascript/
  • Javascript 页面刷新时字体大小调整不起作用

Javascript 页面刷新时字体大小调整不起作用

javascript jquery

Javascript 页面刷新时字体大小调整不起作用,javascript,jquery,font-size,Javascript,Jquery,Font Size,我的页面标题栏有一个+和-用于增加和减少字体（使用下面的功能） 这一切都正常工作。我正在将新的字体大小值存储在cookie中 理想的结果是，如果您a）刷新页面，或b）转到站点上的其他页面，它会将字体大小设置为存储的字体大小。。。然而，情况并非如此 这是我的代码。。。（使用script.js文件） 我没有显示“cookie”代码调用（set和get），因为它们在设置/获取cookie值时工作正常 单击+或-按钮时，它们将使用正确的参数值调用changeFontSize函数。当页面加载/刷新时，将调

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

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

理想的结果是，如果您a）刷新页面，或b）转到站点上的其他页面，它会将字体大小设置为存储的字体大小。。。然而，情况并非如此

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

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

单击+或-按钮时，它们将使用正确的参数值调用changeFontSize函数。当页面加载/刷新时，将调用setPageInitialFontSize（）

通过setPageInitialFontSize，它使用getFontSize调用（19）测试当前大小（16px），并通过changeFontSize，它完成了它应该做的所有事情，但就像 
$（resize）.css（'font-size'，newFontSize）
实际上在这里什么都没做


因此，我可以使用任何帮助来试图找出这不起作用的原因…
我猜这就是您试图实现的目标，使用此代码或跟随您的代码只需查看您缺少的内容，因为我看不到您代码中的Cookie部分，请检查此处的工作代码




使用Jquery和CSS增加和减少字体
<
/脚本>
单击相应的按钮以增加或减少字体
$（文档）.ready（函数（）{
var originalSize=getFontSizeLocalStorage（）
//重置
$（'div'）.css（'font-size'，originalSize）；
$（“.resetMe”）。单击（函数（）{
$（'div'）.css（'font-size'，originalSize）；
});
$（'div'）.css（'font-size'）；
//增加字体大小
$（“.increase”）。单击（函数（）{
var currentSize=getFontSizeLocalStorage（）
var currentSize=parseFloat（currentSize）*1.2；
$（'div'）.css（'font-size'，currentSize）；
addToLocalStorage（当前大小）
返回false；
});        
//减小字体大小
$（“.decrease”）。单击（函数（）{
var currentSize=getFontSizeLocalStorage（）
var currentSize=parseFloat（currentSize）*0.8；
$（'div'）.css（'font-size'，currentSize）；
addToLocalStorage（当前大小）
返回false；
});         
});
函数addToLocalStorage（fontSize）{
window.localStorage.setItem（“fontSize”，fontSize）
}
函数getFontSizeLocalStorage（）{
if（window.localStorage.getItem（“fontSize”））{
返回window.localStorage.getItem（“fontSize”）
}
返回$（'div'）.css（'font-size'））
}

您忽略了
currentFontValue
和
newFontSize
中的单位，这对于
font size
属性无效，因此它将使用浏览器/OS/设置的默认字体大小，通常为16px。请看是的，但是a）它仍然适用于增加和减少按钮（它们做相同的事情）和b）当行是
$（resize.css（'font-size'，newFontSize+“px”）时，我仍然存在问题

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);
};




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