时间戳

首页 > 解决方案 > 使用代码而不使用窗口 onload 事件

javascript - 使用代码而不使用窗口 onload 事件

问题描述

我想使用下面的代码向onClick按钮添加事件。

document.getElementById("first").addEventListener("click", changeHeight);

function changeHeight() {
    var panelH = document.getElementById('second');

    if (panelH.style.height == '') 
        panelH.style.height = '160px';
    else 
       panelH.style.height = '';
}

但仅在包裹在其中时才有效：

window.onload = function() {

}

在不使用事件的情况下，我应该在其他方面进行哪些更改才能使用该代码window.onload？

标签： javascript

解决方案

它工作正常 - 尝试运行下面的代码片段。我猜你已经把你的脚本标签放在head而不是放在body. 因此脚本在有一个元素之前运行id=first。因此，如果是这种情况，那么只需将您的脚本标签移动到正文的底部（这是人们倾向于放置脚本标签的地方）。

document.getElementById("first").addEventListener("click", changeHeight);


function changeHeight() {
       var panelH = document.getElementById('second');

       if (panelH.style.height == '') 
           panelH.style.height = '160px'
       else 
           panelH.style.height = ''
}
#second {
  background-color: teal;
}
<button type="button" id="first">Change height</button>
<div id="second">Test</div>

推荐阅读