为什么这个 Javascript 不起作用？风格变化答案

【问题标题】：Why Doesn't This Javascript Work? Style Change为什么这个 Javascript 不起作用？风格变化
【发布时间】：2012-04-27 18:39:43
【问题描述】：

我一辈子都想不通为什么这不起作用：

javascript：

//==================================//
// resize_middle                            //
//----------------------------------//
// Resizes the content and left     //
// navigation div to make up the        //
// remains of available space.      //
//==================================//
function resize_middle()
{
    min_height = (window.innerHeight - 276) + "px";
    middle_left = document.getElementById("middle_left");
    middle_right = document.getElementById("middle_right");
    alert("its not going to work!");
    alert("here goes...");
    alert(min_height);
    middle_left.style.minHeight = min_height;
    alert("it works!");
    middle_right.style.minHeight = min_height;
}
//==================================//
// event handlers                           //
//==================================//
window.onload = resize_middle();
window.onresize = resize_middle();

html（仅显示头部的正文和 javascript 位）：

<script src="javascript.js" type="text/javascript" charset="utf-8"></script>
<body>
    <div id="container">
        <div id="central_column">
            <div id="top_left">
                <img src="./images/icon.png" alt="icon" style="width:100%;height:auto;" />
            </div>
            <div id="top_right">
                top right
            </div>
            <div id="middle_left">
                middle left
            </div>
            <div id="middle_right">
                middle right
            </div>
            <div id="bottom">
                bottom
            </div>
        </div>
    </div>
</body>

我以前使用过它，并且有一些代码略有不同的工作副本，但它运行良好。我得到调试警报，直到“它工作！”，我没有得到。在此先感谢，呃。

【问题讨论】：

/* free-form comments\nvery useful they are */
我强烈建议对 JavaScript 使用适当的调试器，例如对 Firefox 使用 Firebug。

标签： javascript html css dom

【解决方案1】：

你需要这个：

window.onload = resize_middle;
window.onresize = resize_middle;

因为有了它 resize_middle() 函数会立即处理并将结果添加到事件中。您希望将函数本身添加到事件中，因此您可以省略 ()，除非您的函数返回一个函数供事件使用。

【讨论】：

至少抓住所有人一次

【解决方案2】：

你需要这个：

window.onload = resize_middle;
window.onresize = resize_middle;

目前您正在调用这些函数并将它们的返回值分配给事件。您想要的是将函数自己分配给事件，并让事件调用它们。

旁注：

除非resize_middle 中的变量在别处定义，并且您希望它们可以被外部作用域访问，否则在定义新变量时最好使用var 关键字。

function resize_middle()
{
      // Changed to use "var"
    var min_height = (window.innerHeight - 276) + "px";
    var middle_left = document.getElementById("middle_left");
    var middle_right = document.getElementById("middle_right");

    alert("its not going to work!");
    alert("here goes...");
    alert(min_height);
    middle_left.style.minHeight = min_height;
    alert("it works!");
    middle_right.style.minHeight = min_height;
}

【讨论】：

【解决方案3】：

window.onload = resize_middle;

在assigning event handlers 上阅读此资源。

【讨论】：

哦，你在开玩笑吧！我不能相信这一点！为什么会这样？
@Ell：因为resize_middle 的计算结果是函数，而resize_middle() 的计算结果是函数返回的值。