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>