Change font size of all elements inside a div

Question

I have following page in which there is a div menu. Inside menu we can have <table> , <p> , <h> . Different elements for example:

<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>

Is there a way to change size of all text in between elements inside menu. For example: abc def, hellooo, hiii, 123 this is test. Can i change all that text using jquery or javascript some how.

Answer 1

Yes you can use JavaScript and or jQuery to do what you want, but why wouldn't you just use CSS like suggested?

or you can try this:

<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

You can do this with css:

#menu {
   font-size: XXX;
}

Answer 3

jQuery示例

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

Answer 4

Take a look at this:

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

Hope this helps :)

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();