2011-12-10 11 views
1

私はDIVを持っています。ウィンドウサイズに関してサイズを調整したいと思います。だから私は適用するニュースを返すjavascriptメソッドがあります。しかし、私はどのようにページの負荷の終了を待つことなく、divにそのサイズを定義することができます表示されません。Javascript - ロードのページ終了を待たずにDIVサイズを設定する

私は、ページに長いローディングオブジェクトをいくつか持っているので、window.onloadを使ってサイズを設定すると、先頭に不良なサイズのdivがあり、ページが読み込まれると、 divのサイズが変更されます。 Baaadが探しています。

私のようなもので、とすぐにページが表示されるように、そのサイズを設定したいと思います:

<div id="myid" style="width:myjavascript_Getcorrectsize();"> 

がどのように私はそのようなことをしますか?あなたはまた、相対的な使用することができ、あなたは要素が特定の相対的な幅を持つようにしたい場合は

... 
<script> 
(function(){ //<-- This part is optional, but recommended if you don't want 
      // to leak variables to the global scope 
    document.getElementById("myid").style.width = myjavascript_Getcorrectsize(); 
})(); 
</script> 
</body> 

答えて

3

あなたはwindowloadイベントのために、あるいはいくつかのライブラリが提供する「準備完了」イベントを待つ必要はありません。あなたのスクリプトブロックの後にdivを入れてください。DOMを介してそのdivにアクセスしてサイズを設定することができます。例:

<body> 
    <div id="target">This is the target, JavaScript makes it 100px wide</div> 
    <script> 
    (function() { 
     var elm = document.getElementById("target"); 

     elm.style.width = "100px"; 
    })(); 
    </script> 
</body> 

Live demo

参考文献:

あなたはおそらくCSSを経由してサイズを設定することができれば、あなたがするだろう、と述べましたもっと良い。しかし、私はあなたがすでにそれを見つけることができない何らかの理由でそれを発見したと思います。

+0

必ずしも完全にロードされていない画像などはどうですか? – landons

+0

防弾剤。イメージは正常に読み込まれ、DIVサイズには影響しません。よくできたT J Crowder – codeSetter

+0

@landons: 'img'要素はそこにあります。画像データはまだ表示されていない可能性があります(その幅と高さを照会している場合は、まだ表示されません)。イメージデータに依存している場合は、 'load'イベントと' complete'フラグをフックする必要があります。 –

2

最も簡単な方法は、あなたの文書の最後に<script>ブロックを挿入し、希望のコードを実行することです代わりのJavaScriptの単位:

<div id="myid" style="width:50%"> 
関連する問題