jquery Cookie和CSS

Question

我有一个脚本，将改变特定div的字体大小。我已经添加了cookie功能来存储值，以便下一页将以新的大小显示文本。我知道cookie正在传送价值，但是如何让新页面将字体大小更改为新值？

这里是我的脚本：

<script type="text/javascript"> 
    $(document).ready(function(){ 

     var fSize = $.cookie('fSize'); 
     if (fSize) { 
      $('html').css('font-size', fSize); 
      var originalFontSize = fSize; 
     } else { 

     } 

     $(".resetFont").click(function(){ 
      $('html').css('font-size', originalFontSize); 
      $.cookie('fSize', originalFontSize, { path : '/' }); 

     }); 

     // Increase Font Size 
     $(".increaseFont").click(function(){ 
      var currentFontSize = $('html').css('font-size'); 
      var currentFontSizeNum = parseFloat(currentFontSize, 10); 
      var newFontSize = currentFontSizeNum*1.1; 
      $('html').css('font-size', newFontSize); 
      $.cookie('fSize', newFontSize, { path : '/' }); 
      return false; 
     }); 

     // Decrease Font Size 
     $(".decreaseFont").click(function(){ 
      var currentFontSize = $('html').css('font-size'); 
      var currentFontSizeNum = parseFloat(currentFontSize, 10); 
      var newFontSize = currentFontSizeNum/1.1; 
      $('html').css('font-size', newFontSize); 
      $.cookie('fSize', newFontSize, { path : '/' }); 
      return false; 
     }); 
    }); 

</script> 

Answer 1

你正在函数中使用parseFloat（）。这将删除px（或用于定义字体大小的任何内容），并且不会将其添加回来。

尝试像

$('html').css('font-size', fSize + 'px'); 

Answer 2

尝试更换 'HTML' 与 '体'，像这样：

var fSize = $.cookie('fSize'); 
if (fSize) { 
    $('body').css('font-size', fSize); 
    var originalFontSize = fSize; 
} 

也许你需要添加+ 'em'到fSize或％或东西。否则，我没有看到你的脚本有任何直接的标志..它看起来很好。

---

编辑

在一个不相关的音符，你可以结合两个的这些功能于一体，因为他们几乎是相同的。

// Increase Font Size 
$('.increaseFont, .decreaseFont').click(function() { 
    var currentFontSize = $('html').css('font-size'); 
    var currentFontSizeNum = parseFloat(currentFontSize, 10); 
    var newFontSize = (this.className.match('increaseFont')) 
     ? currentFontSizeNum * 1.1 
     : currentFontSizeNum/1.1; 
    $('html').css('font-size', newFontSize); 
    $.cookie('fSize', newFontSize, { path : '/' }); 
    return false; 
}); 

Answer 3

由于两者。添加“+'em'”部分工作。为了说明1em与16px（字体大小）相同，我必须进行一些调整，因为我按百分比设置了我的主体字体大小。一旦我改变了这一点，我就可以升级字体并且完美地回想起它。谢谢你的帮助。以下是最终代码：

 $(document).ready(function(){ 
      var originalFontSize = $('html').css('font-size'); 

      var fSize = $.cookie('fSize'); 
      if (fSize) { 
       $('html').css('font-size', fSize + 'em'); 
      } else { 
       var originalFontSize = $('html').css('font-size'); 
      } 

      $(".resetFont").click(function(){ 
       $('html').css('font-size', originalFontSize); 
       $.cookie('fSize', originalFontSize, { path : '/' }); 

      }); 

       // Increase Font Size 
      $(".increaseFont").click(function(){ 
        var currentFontSize = $('html').css('font-size'); 
        var currentFontSizeNum = parseFloat(currentFontSize, 10); 
       var newFontSizelg = Math.round(currentFontSizeNum*1.1)/16; 
       $('html').css('font-size', newFontSizelg + 'em'); 
       $.cookie('fSize', newFontSizelg, { path : '/' }); 
       return false; 
      }); 

      // Decrease Font Size 
      $(".decreaseFont").click(function(){ 
       var currentFontSize = $('html').css('font-size'); 
       var currentFontSizeNum = parseFloat(currentFontSize, 10); 
       var newFontSizesm = Math.round(currentFontSizeNum/1.1)/16 ; 
       $('html').css('font-size', newFontSizesm + 'em'); 
       $.cookie('fSize', newFontSizesm, { path : '/' }); 
       return false; 
      }); 
     }); 
}