All geek questions in one place

Resize all elements containing javascript using em

I have a situation where I think that using the "em" metric would be ideal. I have a container with several elements inside. These elements all use em for sizes, font size, borders .. that's it. 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 my theory. I tried to implement something like this using jquery, but it seems that everything is converted to px and changing em does not affect the children.

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 do something like this:

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

. , , , px. , . :

firebug

$('#parent').css('font-size'); // Returns 100px (for example 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

, 50 .

? ? , ? , , .

.

+3
3

, .

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

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

Opera, FF IE6 ( ). .

$('#parent').css('font-size', '2em');    // grows
$('#parent').css('font-size', '0.5em'); //  shrinks


alert($('#parent').css('fontSize'));      // 16px in Opera,FF,IE6
alert($('.child:first').css('fontSize')); // 80px in Opera&FF, 400px in IE6


$('#parent').css('font-size', '0.5em');   // shrinks
alert($('#parent').css('fontSize'));       // 0.5em in Opera,FF,IE6
alert($('.child:first').css('fontSize')); //  45px Opera, 40 px FF, 200px in IE6

, () jQuery ?

0

This is great stuff, I just switched to em-s and tried to set the correct heights for the div in case of changing the font. thanks to this post, I did something like this (ps. I don't know javascript):

  $(document).ready(function(){
     s=$('#parent').css('font-size');       
     s=(s.substring(0,s.length-2));
     x=s*1; //the only way I know to convert string to number
     height1=document.getElementById('div-a').offsetHeight/x;
     height2=document.getElementById('div-b').offsetHeight/x;
     if (height1>height2) {
        document.getElementById('div-b').style.height=height1+"em";
        //(...)
  }});
0
source

Source: https://habr.com/ru/post/1711456/

More articles:


All Articles