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 回答
0

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

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

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

window.onresize = function () {
    resizeToScreen(document.getElementById("box"), 50);
};.
于 2013-06-20T21:23:08.157 回答