更改div内所有元素的字体大小

Question

我有以下页面，其中有一个div菜单。 在内部菜单中我们可以有<table> ， <p> ， <h> 。 例如，不同的元素：

<div id="menu">
 <p>abc def</p>
 <table>
  <tr><td>helloo </td><tr>
  <tr><td>hiii </td><tr>
 </table>
 <div id="sub"><p>123 this is test</p></div>
</div>

有没有办法改变菜单内部元素之间的所有文本的大小。 例如：abc def，hellooo，hiii，123这是测试。 我可以使用jquery或javascript更改所有文本。

Answer 1

是的，你可以使用JavaScript和/或jQuery来做你想要的，但为什么你不会像建议的那样使用CSS？

或者你可以尝试这个：

<Style>
    /*Assumed everything is inheriting font-size*/
    #menu{
      font:12px;
    }
    /* Force all children to have a specified font-size */
    #menu *{
      font:14px;
    }
</style>

<script>
    //JavaScript
    document.getElementById('menu').style.fontSize = "14px";
    //jQuery
    $("#menu").css({'font-size':'14px'});

</script>

Answer 2

你可以用css做到这一点：

#menu {
   font-size: XXX;
}

Answer 3

jQuery示例

$('#menu').nextAll().css('font', '14px');

Answer 4

看看这个：

http://jsfiddle.net/oscarj24/jdw6K/

希望这可以帮助 ：）

Answer 5

  var VINCI = {};

 VINCI.Page = {

init : function() {
    this.initFontResize();
},

initFontResize : function() {
    var container = $('#menu, #sub');
    var originalFontSize = parseFloat(container.css('font-size'), 10);

    var size_level = 0;
    var maximum_size_level = 5;
    var size_change_step = 1.4;

    function calculateFontSize()
    {
        return originalFontSize + (size_level * size_change_step);
    }

      // Increase Font Size
      $('.increaseFont').click(function(){
        if (size_level < maximum_size_level) {
           size_level++;
           container.stop().animate({'font-size' : calculateFontSize()});
        }
        return false;
      });

      // Decrease Font Size
    $('.decreaseFont').click(function(){
          if (size_level > 0) {
           size_level--;
           container.stop().animate({'font-size' : calculateFontSize()});
        }
        return false;
    });

 };

VINCI.Page.init();