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。

Example

Answer 2

您只将字体大小设置为<html>。我想问题是，需要增加字体大小的实际文本应用于pixel中具有字体大小定义的内联样式或css类。因此它的大小不会增加。尝试将font-size设置为文本的实际html元素，或者在em中为文档中的所有元素排除"<html>"设置font-size。

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

Answer 3

我认为这取决于你的CSS。如果您在HTML元素下面定义了元素（如body，div等）以具有绝对字体大小（例如px值），则这将不起作用。如果你使用相对大小（例如em），这个脚本看起来应该可以工作。

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

3 个答案: