0

最近、Web 開発、特に Javascript について学び始めました。言語の理解を深めるために、いくつかの簡単な関数を作成しようとしています。ボックスの高さをウィンドウに比例するようにサイズ変更する関数を作成しましたが、何らかの理由で機能しません。ブラウザー ウィンドウのサイズを変更するたびに、サイズ変更関数がページを更新しません。本当にばかげたエラーをしているように感じますが、Javascript に慣れていないため、それが何であるかを理解できません。

私の HTML は非常に単純です。

<body>
<div id = "box">Hi.</div>
</body>

Javascript コードは次のとおりです。

function resizeToScreen(element, percent)
{
    var wHeight = window.innerHeight;
    var objHeight = wHeight * (percent/100);
    element.style.height = objHeight +"px";
}

window.onresize = resizeToScreen(document.getElementById('box'), 50);

ボックスを黄色で強調表示している jsFiddle へのリンクは次のとおりです: http://jsfiddle.net/sallyg/mb8hB/1/

4

2 に答える 2

3

あなたはすぐに機能を実行しているようですresizeToScreen。のサイズが変更onresizeされたときに後で呼び出すことができるように、への関数参照を提供する必要があります。windowお気に入り：

window.onresize = function () {
    resizeToScreen(document.getElementById("box"), 50);
};

DOM の準備ができたら、次のようにイベントをバインドします。

window.onload = function () {
    // HERE
};

#box要素の準備が整う前にサイズ変更が発生しないように、今のところは問題ないはずです。

プロパティを設定する代わりに.onEVENT問題はありませんが、上書きされる可能性があるため、使用することをお勧めしますaddEventListener(attachEvent古い IE の場合)。

以下にその例を示します。うまくいけば、両方のタイプのブラウザでシームレスに使用できます。

function addEvent(element, eventName, callback) {
    if (element.addEventListener) {
        element.addEventListener(eventName, callback, false);
    } else if (element.attachEvent) {
        element.attachEvent("on" + eventName, callback);
    }
}

次のように使用します。

addEvent(window, "load", function () {
    addEvent(window, "resize", function () {
        resizeToScreen(document.getElementById("box"), 50);
    });
});

参考文献:

于 2013-06-20T21:12:48.723 に答える