在学js原生遇到了一个问题,解决了希望对大家有帮助

Posted 2020-10-31 chengx3programmer

今天在学原生时遇到一个不算问题的问题，怎么叫不算问题的问题呢？  下面就是问题

　　window.onload=function ()

{
var oDiv=document.getElementById(‘drop‘);//获取到整个盒子
var oH2=oDiv.getElementsByTagName(‘h2‘)[0];//获取到播放列表
var oUl=oDiv.getElementsByTagName(‘ul‘)[0];//获取到播放列表曲目
oH2.onclick=showHideUl; //给播放列表一个单鸡事件调用showHideUl
}

function showHideUl()
{
if(oUl.style.display === ‘none‘)//如果隐藏则显示ul列表 反之则隐藏
{
oUl.style.display=‘block‘;
oH2.className=‘up‘;
}
else
{
oUl.style.display=‘none‘;
oH2.className=‘down‘;
}}

这是原本代码，实现的是一个播放列表的下拉

window.onload=function ()

{
var oDiv=document.getElementById(‘drop‘);//获取到整个盒子
var oH2=oDiv.getElementsByTagName(‘h2‘)[0];//获取到播放列表
var oUl=oDiv.getElementsByTagName(‘ul‘)[0];//获取到播放列表曲目
oH2.onclick=showHideUl; //给播放列表一个单鸡事件调用showHideUl
function showHideUl()
{
if(oUl.style.display === ‘none‘)//如果隐藏则显示ul列表 反之则隐藏
{
oUl.style.display=‘block‘;
oH2.className=‘up‘;
}
else
{
oUl.style.display=‘none‘;
oH2.className=‘down‘;
}
}}

这是我修改后的代码， 我将这个showHideUl方法放入了onload里面 使得代码量减少 ，因为在看代码时没有视频讲解 所以拿捏不定 我这样精简是否正确(不过程序确实能够正常执行)

()

于是我看了https://bbs.csdn.net/topics/390498828的问答 

　　onload方法：在页面打开时需等网页所有元素加载完成后才开始执行，而自执行函数是在js加载时就开始执行 所以当你在将一个自执行函数写为一个死循环并引入head里时 页面就什么都显示不出来

因为页面一直在执行这个死循环 不会往下解析body  onload的意义在于他们标志则文档已经加载完毕，页面内元素可以使用了