使用em调整所有包含JavaScript元素的元素

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

至少这是我的理论。我试图用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

运行这些命令，你可以看到，所有的孩子都保持在50像素。

我对此有何看法？我错过了什么？这真的比我想象的难得多吗？从某种意义上说，我试图重复浏览器缩放的效果。

感谢您的任何帮助。

来源

2009-06-28 Mike B

您尝试使用百分比调整文本的大小。评论后

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

来源

2009-06-29 00:15:23 Emily

但是是多米诺骨牌效应不可能？我必须对所有需要的样式规则（宽度，高度，字体大小，边框等）的所有孩子使用此技术。我猜想递归遍历是可能的，但我希望避免这样的事情。 – 2009-06-29 00:24:23

上述工程只是在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版本，你使用的是什么要说的吗？

来源

2009-06-29 00:33:09 jitter

这是很棒的东西，我刚刚切换到EM-S，并努力为字体设置适当的高度divs的情况下。感谢这篇文章，我做了这样的事情（我真的不知道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"; 
     //(...) 
    }});

来源

2009-07-16 17:16:16

使用em调整所有包含JavaScript元素的元素

回答

相关问题