2

我使用以下代码来增加和重置 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>

请帮我...

提前谢谢大家

4

3 回答 3

0

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

然后你可以使用你的javascript来让它工作。

于 2012-07-16T07:00:55.840 回答
0

您的代码对我来说运行良好，但如果仍然无法运行，请尝试以下操作：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为每个元素增加 。

例子

于 2012-07-16T06:15:17.560 回答
-2

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

于 2012-07-16T05:44:34.700 回答