为什么不能用liState[i].style.background="gray"而是this.style.background="gray"

  //封装一个获取类的函数
function getByClass(clasName,parent){
    var parent=parent?document.getElementById(parent):document,
        eles=[],//存储所有类名为clasName的元素的集合
        elements=parent.getElementsByTagName("*");//取出所有元素
 
     for(var i=0,l=elements.length;i<l;i++){
         if (elements[i].className==clasName) {
             eles.push(elements[i]);
         }
     }
     return eles;
}
window.onload=drag;
function drag(){
    //拖动
    var    oTitle=getByClass("login_logo_webqq","loginPanel")[0];
 
    oTitle.onmousedown=fnDown;//鼠标按下
 
    //关闭
    var oClose=document.getElementById("ui_boxyClose"),
        loginPanel=document.getElementById("loginPanel");
    oClose.onclick=function(){
        loginPanel.style.display="none";
    }
 
    //点击显示下拉状态栏
    var loginState=document.getElementById("loginState"),
        loginStatePanel=document.getElementById("loginStatePanel"),
        loginStateShow=document.getElementById("loginStateShow"),
        txtShow=document.getElementById("login2qq_state_txt"),
        liState=getByClass("statePanel_li","loginStatePanel"),
        online=document.getElementById("online");
 
    loginState.onclick=function(){
        loginStatePanel.style.display="block";
        for(var i=0,l=liState.length;i<l;i++){
        liState[i].onmouseover=function(){
            this.style.background="gray";//为什么不能用liState[i]
        }
        liState[i].onmouseout=function(){
            this.style.background="#FFF";
        }
        liState[i].onclick=function(event){
            event=event||window.event;
            loginStatePanel.style.display="none";
            //取消事件冒泡
            if(event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble();
            }
 
            var id = this.id;
            txtShow.innerHTML=getByClass("stateSelect_text",id)[0].innerHTML;
            loginStateShow.className=" ";
            loginStateShow.className="login-state-show "+this.id;
        }
        }
    }
 
} 
 
//鼠标按下
function fnDown(event){
    event=event||window.event;
    var Odrag=document.getElementById("loginPanel");    
    //先求出鼠标点击时的坐标与对话框的距离（是不会变的）
        //先获得对话框的距离
    var disX=event.clientX-Odrag.offsetLeft,
            disY=event.clientY-Odrag.offsetTop;
         
    //鼠标移动时，让其的上边距以及左边距等于鼠标的坐标
    //这个操作使鼠标一直在对话框的左上角
    document.onmousemove=function(event){    
        event=event||window.event;
        // var disX=event.clientX-Odrag.offsetLeft,
        //     disY=event.clientY-Odrag.offsetTop;//不能放在这里 这样disX会变        
        //鼠标移动位置,对话框位置改变clientX-disX
        fnMove(event,disX,disY);
    }
 
    //鼠标松开
    document.onmouseup=function(){
        document.onmousemove=null;
        document.onmousedown=null;
    }
}
function fnMove(e,disX,disY){
    e=e||window.event;
    var Odrag=document.getElementById("loginPanel"),
        left=e.clientX-disX,
        top=e.clientY-disY;
     
    Odrag.style.left=left+"px";
    Odrag.style.top=top+"px";
}

错误显示：liState[i]is indefine