Javascript 设置window.onresize时HTML元素未调整大小_Javascript_Web

Javascript 设置window.onresize时HTML元素未调整大小

javascript web

Javascript 设置window.onresize时HTML元素未调整大小,javascript,web,Javascript,Web,我最近开始学习web开发，特别是Javascript，我正在尝试编写一些简单的函数来提高我对该语言的掌握。我编写了一个函数来调整框的高度，使其与窗口成比例，但由于某些原因，它不起作用-调整大小函数不会在每次调整浏览器窗口的大小时更新页面。我觉得我犯了一些非常愚蠢的错误，但是因为我不熟悉Javascript，所以我不知道它是什么我的HTML非常简单： <body> <div id = "box">Hi.</div> </body> 下面是指向J

我最近开始学习web开发，特别是Javascript，我正在尝试编写一些简单的函数来提高我对该语言的掌握。我编写了一个函数来调整框的高度，使其与窗口成比例，但由于某些原因，它不起作用-调整大小函数不会在每次调整浏览器窗口的大小时更新页面。我觉得我犯了一些非常愚蠢的错误，但是因为我不熟悉Javascript，所以我不知道它是什么

我的HTML非常简单：

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

下面是指向JSFIDLE的链接，它突出显示了黄色框：

您似乎正在立即执行

resizeToScreen

功能。您需要提供对

onresize

的函数引用，以便以后调整

窗口的大小时可以调用该函数。比如：
window.onresize = function () {
    resizeToScreen(document.getElementById("box"), 50);
};

您希望在DOM就绪后绑定事件，例如将其放入：
window.onload = function () {
    // HERE
};

现在应该可以了，这样在#box
元素准备就绪之前就不会发生大小调整
请注意，不必设置.onEVENT
属性，但可以覆盖，因此建议使用addEventListener
（对于旧IE使用attachEvent
）
下面是一个这样的例子，它有望在两种浏览器中无缝使用：
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);
    });
});

参考资料：

addEventListener
：
addEventListener
与onEVENT
：
您似乎正在立即执行resizeToScreen
功能。您需要提供对onresize
的函数引用，以便以后调整窗口的大小时可以调用该函数。比如：
window.onresize = function () {
    resizeToScreen(document.getElementById("box"), 50);
};

您希望在DOM就绪后绑定事件，例如将其放入：
window.onload = function () {
    // HERE
};

现在应该可以了，这样在#box
元素准备就绪之前就不会发生大小调整
请注意，不必设置.onEVENT
属性，但可以覆盖，因此建议使用addEventListener
（对于旧IE使用attachEvent
）
下面是一个这样的例子，它有望在两种浏览器中无缝使用：
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);
    });
});

参考资料：

addEventListener
：
addEventListener
与onEVENT
：
问题在下面的陈述中。您正在“调用”resizeToScreen（）
，并“将其返回值赋值为”onresize“
相反，您希望将函数“附加到调整大小事件”。这就是你如何做到的：
window.onresize = function () {
    resizeToScreen(document.getElementById("box"), 50);
};.

问题在下面的陈述中。您正在“调用”resizeToScreen（）
，并“将其返回值赋值为”onresize“
相反，您希望将函数“附加到调整大小事件”。这就是你如何做到的：
window.onresize = function () {
    resizeToScreen(document.getElementById("box"), 50);
};.

您似乎正在立即执行resizeToScreen
函数。您需要提供一个函数引用，以便在调整窗口大小时调用它。比如：window.onresize=function（）{resizeToScreen（document.getElementById（“box”），50）；}。您希望在DOM准备就绪后绑定事件（将其放在window.onload=function（）{/*HERE*/}；
中，现在应该可以了），这样在#box
元素启动之前就不会发生大小调整ready@Ian这我正要写出来，但你把我揍了一顿！为什么不为div
：高度：50%使用简单的CSS
@Teemu是的，我有一种感觉，这可能在没有JavaScript的情况下完成，但我没有充分研究这个问题，只是回答了眼前的问题。如果那样行的话，你一定要发布一个answer@Ian我不知道，OP明确地问为什么代码不起作用。您已经回答了这个问题，可能只是将CSS添加到您的答案中……您似乎正在立即执行resizeToScreen
函数。您需要提供一个函数引用，以便在调整窗口大小时调用它。比如：window.onresize=function（）{resizeToScreen（document.getElementById（“box”），50）；}。您希望在DOM准备就绪后绑定事件（将其放在window.onload=function（）{/*HERE*/}；
中，现在应该可以了），这样在#box
元素启动之前就不会发生大小调整ready@Ian这我正要写出来，但你把我揍了一顿！为什么不为div
：高度：50%使用简单的CSS
@Teemu是的，我有一种感觉，这可能在没有JavaScript的情况下完成，但我没有充分研究这个问题，只是回答了眼前的问题。如果那样行的话，你一定要发布一个answer@Ian我不知道，OP明确地问为什么代码不起作用。您已经回答了这个问题，也许只需在您的答案中添加CSS内容……旧IE有多大？顺便说一句，答案很好，这就是我使用“旧IE”的原因。谢谢：）嗯，我不确定是否有一个定义为“旧IE”，但我一直认为它的意思比版本旧9@raam86不确定你是否收到了这条评论的通知-我忘了添加@raam86
部分：）谢谢@ian这很有帮助谢谢@ian，这是非常有帮助的，现在起作用了。不过出于好奇，你说OneEvent属性被覆盖是什么意思？旧IE有多大？顺便说一句，答案很好，这就是我使用“旧IE”的原因。谢谢：）嗯，我不确定是否有一个定义为“旧IE”，但我一直认为它的意思比版本旧9@raam86不确定你是否收到了这条评论的通知-我忘了添加@raam86
部分：）谢谢@ian这很有帮助谢谢@ian，这是非常有帮助的，现在起作用了。只是出于好奇，你问我什么