当我设置 window.onresize 时 HTML 元素没有调整大小答案

【问题标题】：HTML element not resizing when I set window.onresize当我设置 window.onresize 时 HTML 元素没有调整大小
【发布时间】：2013-06-21 22:21:38
【问题描述】：

我最近开始学习 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/

【问题讨论】：

您似乎正在立即执行resizeToScreen 函数。您需要提供对onresize 的函数引用，以便在调整窗口大小时调用它。喜欢：window.onresize = function () { resizeToScreen(document.getElementById("box"), 50); };。您想在 DOM 准备好之后绑定事件（现在将它放在 window.onload = function () { /* HERE */ }; 中应该没问题），以便在 #box 元素准备好之前不会发生调整大小跨度>
@Ian 这个。我正要写下来，但你打败了我！
你为什么不使用简单的 CSS 为 div: height: 50%;
@Teemu 是的，我有一种感觉，这可能不需要 JavaScript 就可以完成，但我没有充分研究这个问题，只是回答了眼前的问题。如果这样可行，您绝对应该发布答案
@Ian 我不知道，OP 清楚地询问为什么代码不起作用。你已经回答了这个问题，也许只是在你的答案中添加 CSS 东西......

标签： javascript web

【解决方案1】：

您似乎正在立即执行resizeToScreen 函数。您需要提供对onresize 的函数引用，以便稍后在调整window 的大小时调用它。喜欢：

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: https://developer.mozilla.org/es/docs/DOM/elemento.addEventListener
addEventListener 与 onEVENT: addEventListener vs onclick

【讨论】：

旧 IE 有多少年了？顺便说一句，很好的答案，这就是我使用 SO 的原因。
谢谢 :) 好吧，我不确定是否有定义的“旧 IE”，但我一直认为它比版本 9 更早
@raam86 不确定您是否收到了该评论的通知 - 我忘了添加 @raam86 部分 :)
谢谢@ian 很有帮助
非常感谢@ian，这很有帮助，现在可以使用了。只是出于好奇，您所说的 onevent 属性被覆盖是什么意思？

【解决方案2】：

问题出在下面的语句中。您正在“调用”resizeToScreen()，并且“分配”它的返回值给“onresize”。

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

相反，您希望将您的函数“附加”到调整大小事件。这就是你的做法：

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

【讨论】：

谢谢@tushar-roy！这对我理解代码的根本问题有很大帮助。