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");
            });      

作者：簡簡人事

出處：http://www.cnblogs.com/codeon/

本文版權歸作者和部落格園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接。