Question

我认为使用'em'指标是完美的。我有一个容器里面有几个元素。这些元素都使用em来表示尺寸，字体大小，边框等等。我希望能够通过简单地更改父容器的em值来动态地增大或缩小所有这些元素。

至少那是我的理论。我尝试使用jquery实现这样的东西，但似乎所有东西都转换为px并且更改em对子元素没有影响。

以下是一个例子：

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

使用javascript（本例中为jquery），我希望能够做到这样的事情：

$('#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'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

如您所见，所有孩子都保持在50px。

我是以正确的方式来做这件事的吗？我错过了什么？这真的比我想象的要难得多吗？从某种意义上说，我正在尝试复制浏览器缩放所具有的效果。

感谢您的帮助。

Answer 1

您尝试使用百分比调整文本大小。

$('#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'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>

Answer 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版本是什么？

Answer 3

这是很棒的东西，我刚刚切换到em-s，并且在字体改变的情况下为div设置适当的高度。感谢这篇文章我做了类似的事（ps。我真的不懂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";
        //(...)
  }});

使用em使用javascript调整所有包含元素的大小

3 个答案: