如何使用javascript增加和重置html的字體大小？

Question

我使用以下代碼來增加和重置HTML的字體大小，但是無法增加字體大小。我想增加HTML頁面的整個正文部分的字體大小。以下代碼我曾經用來增加頁面的字體大小。

<script type="text/javascript">
  $(document).ready(function(){
    // Reset Font Size
    var originalFontSize = $('html').css('font-size');
    //console.log(originalFontSize);

    $(".resetFont").click(function(){
      $('html').css('font-size', originalFontSize);
    });

    // Increase Font Size
    $(".increaseFont").click(function(){
      var currentFontSize = $('html').css('font-size');
      var currentFontSizeNum = parseFloat(currentFontSize, 10);
      var newFontSize = currentFontSizeNum*1.2;

      $('html').css('font-size', newFontSize);
      return false;
    });
  });

</script>

在HTML頁面中，我使用以下

<a href="#" class="resetFont">RESET Font</a>
<a href="#" class="increaseFont">INCREASE FONT</a>

請幫我...

提前謝謝大家

Answer 1

您的代碼對我來說很好用，但是如果仍然無法使用，請嘗試以下操作： http : //jsfiddle.net/XZfKh/ 。

var originalFontSize;
$(document).ready(function(){
  // Reset Font Size
  originalFontSize = $('html').css('font-size');
  //console.log(originalFontSize);

   $(".resetFont").click(function(){
    $('html').css('font-size', originalFontSize);
  });

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

我將originalFontSize的聲明移到頂部。

編輯：

如果某些元素的font-size已指定，請使用以下代碼：

var newFontSize = 100;
$(document).ready(function(){
  $(".resetFont").click(function(){
    newFontSize = 100;
    var allElems = $('*');
    for(var counter = 0; counter < allElems.length; counter++) {
        $(allElems[counter]).css('font-size', '100%');
    }
  });

  // Increase Font Size
  $(".increaseFont").click(function(){
    newFontSize = newFontSize*1.2;
    var allElems = $('*');
    for(var counter = 0; counter < allElems.length; counter++) {
        $(allElems[counter]).css('font-size', newFontSize + '%');
    }
    return false;
  });
});

它循環瀏覽頁面上的所有元素，並增加每個元素的font-size 。

例

Answer 2

您僅將font-size設置為<html> 。 我想問題是，需要字體大小增加的實際文本是用inline樣式或css類應用的，它們在pixel具有字體大小的定義。 這樣它的大小就不會增加。 嘗試將font-size設置為文本的實際html元素，或者在em為文檔中除"<html>"所有元素設置font-size。

然后，您可以使用JavaScript使其正常工作。

Answer 3

我認為這取決於您的CSS。 如果您在HTML元素下方定義了元素（例如body，divs等）以具有絕對字體大小（例如px值），則此方法將無效。 如果您使用相對大小（例如em），則此腳本看起來應該可以工作。

如何使用javascript增加和重置html的字體大小？

問題描述

3 個解決方案

解決方案1
0 2012-07-16 06:15:17

解決方案2
0 2012-07-16 07:00:55

解決方案3
-2 2012-07-16 05:44:34

如何使用javascript增加和重置html的字體大小？

問題描述

3 個解決方案

解決方案1 0 2012-07-16 06:15:17

解決方案2 0 2012-07-16 07:00:55

解決方案3 -2 2012-07-16 05:44:34

解決方案1
0 2012-07-16 06:15:17

解決方案2
0 2012-07-16 07:00:55

解決方案3
-2 2012-07-16 05:44:34