一个原生js的新手问题--和this有点关系

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           ul{
               position: relative;
               list-style: none;
           }
           ul li{
               width: 100px;
               height: 50px;
               background: #CCCCCC;
               margin: 2px;
           }
           div{
               width: 200px;
               height: 200px;
               background: greenyellow;
               position: absolute;
               top: 0px;
               left: 150px;
               display: block;
           }
       </style>
       <script>
           window.onload=function(){
               var oUl=document.getElementsByTagName("ul")[0];
               var oLi=document.getElementsByTagName("li");
               var oDiv=document.getElementsByTagName("div")[0];
               for (var i=0;i<oLi.length;i++) {
                   oLi[i].onmousemove=function(){
                       if (oUl.offsetHeight-oLi[i].offsetTop>200) {
                           oDiv.style.top=oLi[i].offsetTop+"px";
                           oDiv.style.display="block";
                       }
                       else{
                           oDiv.style.top=this.offsetTop+oLi[i].offsetHeight-200+"px";
                       }
                   }
               }
           }
       </script>
   </head>
   <body>
       <ul>
           <li>1111</li>
           <li>2222</li>
           <li>3333</li>
           <li>4444</li>
           <li>5555</li>
           <li>6666</li>
           <li>7777</li>
           <li>8888</li>
           <li>9999</li>
           <li>1010</li>
           <div></div>
       </ul>
   </body>
</html>

这个程序运行为什么会报错---Cannot read property 'offsetTop' of undefined"？

但是把oLi【i】改成this反而可以运行

为什么会这样

肖小波

浏览 1643回答 1

一个原生js的新手问题--和this有点关系

1回答