代码之家 › 专栏 › 技术社区 › Mike B

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

css jquery javascript

Mike B · 技术社区 · 15 年前

我有一种情况,我认为使用“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值。因此,父em值将失去其威力。我的意思是:

在页面呈现之后,我通过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

如你所见,所有的孩子都保持在50像素。

我这样做对吗?我错过了什么?这真的比我想象的要难吗?在某种意义上,我试图复制浏览器缩放的效果。

3 回复 | 直到 15 年前

Emily 15 年前

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

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

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

jitter 15 年前

$('#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版本是什么?

Eric Eric 15 年前

这是一个很棒的东西,我刚刚换成了em-s,正在努力为div设置合适的高度,以防字体发生变化。多亏了这篇文章,我做了类似的事情(附言,我真的不懂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";
        //(...)
  }});