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