遅延または正しい

をレンダリングするために必要な身体上の指定された幅（誰が娯楽目的のためにバックグラウンドストーリーに興味を持っている場合、これはmy previous questionのフォローアップである。これはおそらく、あなたがこの質問を理解する助けにはなりません。）遅延または正しい

<aside>と<main> JavaScriptの幅と高さを持つ2つの要素があり、その合計幅は画面の幅です（表示はインラインブロックです）。あなたの場合は

<!DOCTYPE html> 
<html>  
<body> 

<aside></aside><!-- comment to remove inline-block whitespace 

--><main></main> 

<script> 
    var h = screen.height/100; 
    var w = screen.width/100; 

    var e = document.getElementsByTagName("aside")[0].style; 
    e.display = "inline-block"; 
    e.backgroundColor = "lightblue"; 
    e.width = 14*w + "px"; 
    e.height = 69*h + "px"; 
    e.marginRight = 0.5*w + "px"; 

    e = document.getElementsByTagName("main")[0].style; 
    e.display = "inline-block"; 
    e.backgroundColor = "green"; 
    e.width = 85.5*w + "px"; 
    e.height = 69*h + "px"; 

    e = document.getElementsByTagName("body")[0].style; 
    e.margin = e.padding = "0"; 
    e.backgroundColor = "black"; 
</script> 
</body> 
</html>

：（ブラウザの幅が画面の幅に等しくなるように最大化ブラウザ）を使用すると、Webブラウザでこのコードを実行する場合は、体が驚くほど適切要素に適合しないことに注意してくださいかもしれませんしかしJavaScriptには遅延があり、要素は適切にレンダリングされます。

<script> 
    setTimeout(function() { 

    [...] 

    }, 200); 
</script>

次の行を追加することで、代わりに遅延を導入するのボディにscreen.widthの指定された幅を持たせることも可能である：これは、体が何らかの方法で正しい幅を把握するために「時間が必要」ことを示唆しています。これは（指定がない限り）体はすぐにその正しい幅を知らないというこれまでの推測をサポートしています。私はこれを説明するために野生の推測をスローする自由を取っているにもかかわらず

<script> 

    [...] 

    e.width = 100*w + "px"; 
</script>

を、私は実際に手掛かりを持っていません何が起こっている。

要素が最初に適切に配置されない理由と、なぜこれらの2つのソリューションが機能するのですか？

（注：e.whiteSpace = "nowrap";とNOWRAPするために身体の空白を設定することにより、この問題を解決することも可能ですが、私は、これは他の二つと同じことをしていない疑いがある代わりに作成します。体内の要素のスペースは、体に十分な余裕がないにもかかわらず、要素が互いに隣り合うだけです。）

出典

2016-05-03 Gendarme

コードを実行する前にDOMが利用可能になるのを待つ必要があります。ここに：pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it。これはおそらくsetTimeoutが機能する理由です。また、異なる要素に別々の変数名を割り当てる必要があります。

// self executing function before closing body tag 
(function() { 
    // your code here 
    // the DOM will be available here 
})();

このタスクを達成するためにJavascriptを使用し、CSSを使用していない理由はありますか？の終わりにはJavaScriptを持っているために十分に良好であることをあなたのリンク状態での質問への受け入れ答えは

html,body { 
    width: 100%; 
    height: 100%; 
} 
#aside { 
    display:inline-block; 
    position: relative; 
    float: left; 
    width: 14%; 
    height: 69%; 
    background: blue; 
} 
#main { 
    display:inline-block; 
    position: relative; 
    float: left; 
    width: 86%; 
    height: 31%; 
    background: azure; 
}

出典

2016-05-03 23:35:21 msmfsd

：私は、あなたのCSSスタイルを設定し、ID =「脇」CSSのidつまり、あなたの要素を与える示唆します私の持っている身体。 – Gendarme

あなたの第2のポイントに答えるために、私が気づいているCSSは 'screen.width'と' screen.height'に関してJavaScriptのスタイル設定と同じ方法でHTMLをスタイルすることができません。 CSSの％は、画面ではなくウェブブラウザの幅/高さを示します。 – Gendarme

また、受け入れられた答えは、DOMが準備が整った後で、自分のコードを自己実行関数にラップするか、jQueryのような準備ができたコードを使って実行し、試してみることです。 – msmfsd

答えて

関連する問題