0

私は JavaScript の初心者ですが、学習しようとしています。そのため、jQuery に頼らずにこれを達成したいと考えています。

ブラウザーの高さと幅に基づいてコンテンツのサイズが動的に変更されるページを読み込もうとしています。現在、コードの 2 つの反復があります。1 つはコンテンツ div に画像があり、もう 1 つははるかに単純です。

まず、画像のないものに対処します。winSizeHTML の下部にある body タグまたは script タグ内のイベントから呼び出すonloadと、スタイルを設定する前に scrollHeight/Width を決定できるようですが、設定するのではなく、コンテンツ div の黒でウィンドウ全体を塗りつぶします。スクリプトがそうあるべきだと判断したので、その幅を 704px にします。スクリプト ヘッダーでを使用してdocument.body.onloadwinSize を呼び出すと、null の scrollWidth/Height が発生し、灰色の背景のみが表示されます。

そのためのコードは次のとおりです。

<style>
    body {
       padding:0px;
       background-color: #808080;
    }
    div { 
       position:absolute;
    }
</style>
<script type="text/javascript">
    bArat=3/2;
    bH1=0;
    bW1=0;
    bX1=0;
    bY1=0;

    function winSize(){
       winW=document.body.scrollWidth;
       winH=document.body.scrollHeight;
       _style();
    }

    function _style(){
       bH1=winH;
       bW1=bH1/bArat;
       bX1=(winW/2)-(bW1/2);
       document.getElementById("gutters").style.left=bX1;
       document.getElementById("gutters").style.top=bY1;
       document.getElementById("gutters").style.height=bH1;
       document.getElementById("gutters").style.width=bW1;
       document.getElementById("gutters").style.backgroundColor="black";
       document.body.style.backgroundColor="black";
    }

    //document.body.onload=winSize();
</script>
</head>
<body>
    <div id="gutters">
    </div>
    <script>
    //winSize();
    </script>
</body>
</html>

img第二に、このスクリプトのより複雑なバージョンでは、 (この問題が解決されるとすぐに複数になる)を格納する「ガター」内に div が含まれていますが、読み込まれるときを除いて、ほとんどすべてが正常に動作します。スタイル (Chrome)。ただし、更新時にスタイルをロードするか、onload トリガーに 50 ミリ秒の遅延を設定した場合はロードします。これはonload、html がロードされた後、画像自体がレンダリングされる前に Chrome (および Safari?) がイベントをトリガーするためであると推測されます。したがって、関数は、実際にはロードが完了していないボディの高さと幅を判別できません。

この 2 番目のスクリプトでは、上記の関数:

function winSize(){
   winW=document.body.scrollWidth;
   winH=document.body.scrollHeight;
   _style();
}

まったく機能しません。winH または winW は定義されていません。

しかし、関数はhttp://www.javascripter.net/faq/browserw.htmから引っ掛かりました 

function winSize(){
    if (document.body && document.body.offsetWidth) {
        winW = document.body.offsetWidth;
        winH = document.body.offsetHeight;
    }
    if (document.compatMode=='CSS1Compat' &&
    document.documentElement &&
    document.documentElement.offsetWidth ) {
        winW = document.documentElement.offsetWidth;
        winH = document.documentElement.offsetHeight;
    }
    if (window.innerWidth && window.innerHeight) {
        winW = window.innerWidth;
        winH = window.innerHeight;
    }
}

上記のように動作します。最初のスクリプトでこの 2 番目の winSize 関数を実行すると、「null のプロパティ 'style' を読み取れません」というエラーが返されます。

私は、その簡潔さと (W3schools.com によると) object.scrollWidthoverとのより優れたクロスブラウザー互換性のために最初の関数を好みますwindow.innerWidthが、明らかに、1 つまたは両方が何らかのコンテキストで壊れています。

私の質問は、重要な順に次のとおりです。

  1. 2 番目のスクリプトで、画像が完全に読み込まれた後に「winSize」関数を実行するにはどうすればよいですか? (それが問題なら)
  2. 同じ方法で実装されている場合、2 つのスクリプトが 2 つの機能に対して非常に異なる反応を示すのはなぜですか。
  3. 私が提示した最初のスクリプトを修正するにはどうすればよいでしょうか? 最初のコンテンツ div である "gutters" が、四角形を作成するのではなく、画面全体を埋め尽くしています。
  4. onload イベントを body タグに入れると機能するのに、document.body.onload を head のスクリプトに入れると機能しないのはなぜですか。

非常に長い質問で申し訳ありませんが、1 つの質問に多くの質問が含まれていますが、それらを解く方法がわかりませんでした。私はどんな助けにも感謝し、これについて頭を包むのを手伝ってくれる人を永遠に称賛します.

4

1 に答える 1

0

次元を % で指定してブラウザに任せてみませんか。非常に具体的な要件がありますか？シナリオを書いてください（要するに）

于 2012-05-21T06:02:14.330 に答える