Question

我最近开始学习Web开发，特别是Javascript，我正在尝试编写一些简单的函数来提升我对语言的掌握。我写了一个函数来调整框的高度以与窗口成比例，但由于某种原因它不起作用 - 每次调整浏览器窗口大小时，resize函数都不会更新页面。我觉得我犯了一些非常愚蠢的错误，但因为我不熟悉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/

Answer 1

您似乎正在立即执行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);
    });
});

参考文献：

addEventListener：https://developer.mozilla.org/es/docs/DOM/elemento.addEventListener
addEventListener与onEVENT：addEventListener vs onclick

Answer 2

问题出在以下声明中。您是“ 致电 ”resizeToScreen()，并且“ 分配 ”将其返回值设为“onresize”

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

相反，您希望将“ 附加 ”您的函数添加到resize事件中。你就是这样做的：

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

设置window.onresize时，HTML元素没有调整大小

2 个答案: