Home/ Questions/Q 254485
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T21:51:02+00:00

I have a situation where I think using the ’em’ metric would be perfect.

  • 0

I have a situation where I think using the ’em’ metric would be perfect. I have a container with several elements inside. These elements all use em for dimensions, font-size, borders.. everything. I want to be able to grow or shrink all of these elements dynamically by simply changing the em value of the parent container.

At least that’s my theory. I tried to implement something like this using jquery but it appears that everything is converted to px and changing the em has no effect on the child elements.

Here is an example:

<div id="parent">
     <div class="child">Text</div>
     <div class="child">Text</div>
     <div class="child">Text</div>
</div>

<style>
    #parent { font-size: 1em; }
    .child { width: 10em; height: 10em; font-size: 5em; }
</style>

With javascript (jquery for this example), I would like to be able to do something like this:

$('#parent').css('font-size', '2em') // This would make everything grow
$('#parent').css('font-size', '.5em') // This would make everything shrink

This line does not produce an error. However, after inspecting further it appears that everything has been converted to px value. Thus, parent em values lose their power. Here is what I mean:

After the page renders, I run these commands through the firebug console

$('#parent').css('font-size'); // Returns 100px (for example's sake)
$('.child:first').css('font-size'); // Returns 50px
$('#parent').css('font-size', '2em'); // This should affect all children
$('#parent').css('font-size'); // Returns 20px
$('.child:first').css('font-size'); // STILL Returns 50px

As you can see, all the children remain at 50px.

Am I going about this the right way? What am I missing? Is this really a lot harder than I think it is? In a sense, I’m trying to duplicate the effect that browser-zoom has.

Thanks for any help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You try resizing the text using percentage. 

    $('#parent').css('font-size', '200%')// This would make everything grow
$('#parent').css('font-size', '50%') // This would make everything shrink

    edit after comment – using FF2.0

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>test</title>
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <style type="text/css">
    body {font-size:10px;}
    #parent { font-size: 1em; }
    .child { width: 10em; height: 10em; font-size: 5em; }
</style>

<script type="text/javascript">
  $(document).ready(function(){
        alert($('#parent').css('font-size')); // Returns 10px (for example's sake)
        alert($('.child:first').css('font-size')); // Returns 50px
        $('#parent').css('font-size', '200%'); // or you can use 2em here
        alert($('#parent').css('font-size')); // Returns 20px
        alert($('.child:first').css('font-size')); // Returns 100px
    });
</script>
</head>
<body>
<div id="parent">
     <div class="child">Text</div>
     <div class="child">Text</div>
     <div class="child">Text</div>
</div>
</body>
</html>
    • 0