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。サイズが大きくならないように。テキストの実際の html 要素に font-size を設定するかem、ドキュメントのすべての要素に対して font-size を設定してみてください exclude "<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 に答える