javascriptを使用してすべての要素をリサイズem

「em」メトリックを使用すると完璧だと思う状況があります。私は内部にいくつかの要素を持つコンテナを持っています。これらの要素はすべて、次元、フォントサイズ、枠線、すべてにemを使用します。親コンテナのem値を変更するだけで、これらの要素をすべて動的に拡大または縮小できます。javascriptを使用してすべての要素をリサイズem

少なくとも私の理論です。私はjqueryを使ってこのようなものを実装しようとしましたが、すべてがpxに変換され、emを変更することは子要素には影響しません。ここで

は一例です：ジャバスクリプト（この例ではjQueryの）で

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

、私はこのような何かをできるようにしたいと思います：

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

この行は生成されません。エラー。しかし、さらに調べると、すべてがpx値に変換されているように見えます。したがって、親の値はその能力を失う。ここで私が何を意味するかです：

ページの後、私はあなたが見ることができるように、すべての子どもたちはは50pxのまま

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

放火魔コンソールを介してこれらのコマンドを実行し、レンダリングします。

これは正しい方法ですか？私は何が欠けていますか？これは本当に私が思うよりもはるかに難しいですか？ある意味では、ブラウザズームが持つ効果を再現しようとしています。

ありがとうございました。

出典

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

コメントの後編集 - オペラ、FFとIE6で私のためだけで罰金以上の作品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

しかし、ドミノ効果はありませんか？私は必要なすべてのスタイルルール（幅、高さ、フォントサイズ、境界線など）を持つすべての子供にこのテクニックを使用する必要があります。私は再帰でdom traversalが可能だと思いますが、私はそのようなことを避けることを望んでいました。 –

私のテストでは子供たちに影響を与えています（emsと％）。たぶんそれは、火かき棒のコンソールでjqueryを実行することと関係があります。上記のコードを貼り付けます。 – Emily

まあ私は愚かな気がします...私は自分のコードをFirebugコンソールの代わりにページ自体に書きましたが、私が望んだとおりに正確に動作しました。エミリーとジッターに助けてくれてありがとう。 –

を使用して（他の人をテストすることはできません）。これらの2つの呼び出しを使用すると、テキストを拡大したり縮小したりできます。

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

私は

$('#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のバージョンを使用していると言って呼び出した後、それらの

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

のいずれかを呼び出す前に？

出典

2009-06-29 00:33:09 jitter

私はちょうど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"; 
     //(...) 
    }});

出典

2009-07-16 17:16:16

javascriptを使用してすべての要素をリサイズem

答えて

関連する問題