如何使用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