logo标签列表

为什么这段Javascript代码不起作用？样式更改

javascripthtmlcssdom
3
我很难理解为什么这个不起作用：
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>

我之前使用过这个，并且有一份略微不同的代码副本，但它完美地运行。我得到了调试警报，直到“它工作了！”，但我没有得到它。提前感谢，ell。

1
/* free-form comments\nvery useful they are */ - user395760
2
我强烈建议在JavaScript中使用适当的调试器，比如Firefox的Firebug。 - Matt Ball
3个回答
6
你需要使用这个替代方案：
window.onload = resize_middle;
window.onresize = resize_middle;

因为在调用resize_middle()函数时，该函数会立即执行并将结果添加到事件中。你希望将函数本身添加到事件中，因此除非你的函数返回一个供事件使用的函数，否则不要包含括号。
至少有一次会让每个人措手不及 - Kurru
4
你需要使用这个替代方案：
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;
}
2
哦，你在开玩笑吧！我简直不敢相信这个！为什么这样能行？ - Ell
@Ell: 因为resize_middle评估为_函数本身_，而resize_middle()评估为_函数返回的值_. - Matt Ball
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接