JavaScript(获取或设置html元素的宽,高,坐标)，确定和判断鼠标是否在元素内部，二级导航菜单鼠标离开样式问题解决

设置:

    document.getElementById('id').style.width=value
    document.getElementById('id').style.height=value
    document.getElementById('id').style.top=value
    document.getElementById('id').style.left=value

 

获取:

    value=document.getElementById('id').offsetLeft
    value=document.getElementById('id').offsetTop
    value=document.getElementById('id').offsetWidth
    value=document.getElementById('id').offsetHeight

找一个元素的坐标：

function findPosition( oElement )  
{  
  var x2 = 0;  
  var y2 = 0;  
  var width = oElement.offsetWidth;  
  var height = oElement.offsetHeight;  
  alert(width + "=" + height);  
  if( typeof( oElement.offsetParent ) != 'undefined' )  
  {  
    for( var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent )  
    {  
      posX += oElement.offsetLeft;  
      posY += oElement.offsetTop;       
    }  
    x2 = posX + width;  
    y2 = posY + height;  
    return [ posX, posY ,x2, y2];  
     
    } else{  
      x2 = oElement.x + width;  
      y2 = oElement.y + height;  
      return [ oElement.x, oElement.y, x2, y2];  
  }  
}  

知识进阶，二级导航展示隐藏效果问题（鼠标经过一级菜单二级菜单展示，鼠标离开一级菜单相应的二级菜单隐藏，而导致鼠标在一级菜单和二级菜单过渡过程中二级菜单隐藏，无法点到二级菜单）：

            $("一级导航菜单").mouseover(function() {
                var index = $(this).find("a").attr("index");
                $(".list-1st2-li").removeClass("list-spread"); //先删除掉所有一级菜单展开的样式
                $(".sp-item-" + index).addClass("list-spread");//
            });

            //鼠标离开时判断鼠标是否在当前li范围内部，如果不是就去掉list-spread类样式
            $("一级导航菜单").mouseleave(function(event) {
                var oElement = $(this)[0];
                var x = event.clientX;
                var y = event.clientY;

                var x1 = 0;
                var y1 = 0;
                var x2 = 0;
                var y2 = 0;
                var width = oElement.offsetWidth;
                var height = oElement.offsetHeight;

                if(typeof(oElement.offsetParent) != 'undefined') {
                    for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
                        posX += oElement.offsetLeft;
                        posY += oElement.offsetTop;
                    }
                    x1 = posX;
                    y1 = posY;
                    x2 = posX + width;
                    y2 = posY + height;

                } else {
                    x1 = oElement.x;
                    y1 = oElement.y;
                    x2 = oElement.x + width;
                    y2 = oElement.y + height;
                }
                //鼠标不在一级导航菜单元素内部
                if(x <= x1 || x >= x2 || y <= y1 || y >= y2) {
                    var index = $(this).find("a").attr("index");
                    $(".sp-item-" + index).removeClass("list-spread");
                }
            });

            $("二级子菜单").mouseout(function() {
                $(this).removeClass("list-spread");
            });