得到对象以及鼠标在页面的绝对位置
得到对象以及鼠标在页面的绝对位置
关键词： 绝对位置 absolute position x,y坐标 鼠标位置获 取页面元素的位置对我们很重要，如何获得元素位于页面的绝对位置呢？通过offsetLeft,offsetTop可以获得对象的左边距和上边距，但是不 同浏览器因为对象处于的地位而会有些不同的解析，例如有些时候计算边距时没有把parent的边距计算进去，下面的函数将可以获得对象绝对的位置。 如下： // get absolute Left position //建立者:[email protected] //返回对象位于窗口的绝对左边距离 function getAbsoluteLeft( ob ){ if(!ob){return null;} var obj = ob; var objLeft = obj .offsetLeft; while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){ objLeft += obj .offsetParent.offsetLeft; obj = obj .offsetParent; } return objLeft ; }
// get absolute TOP position //建立者:[email protected] //返回对象位于窗口的绝对上边距离 function getAbsoluteTop( ob ){ if(!ob){return null;} var obj = ob; var objTop = obj .offsetTop; while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){ objTop += obj .offsetParent.offsetTop; obj = obj .offsetParent; } return objTop ; }
获得页面的的宽高，左右边距有这些： window.screen.width; window.screen.height; window.document.body.offsetWidth; window.document.body.offsetHeight; window.screen.availWidth; window.screen.availHeight; window.document.body.offsetWidth; window.document.body.offsetHeight; window.screen.availWidth; window.screen.availHeight; window.document.body.scrollWidth; window.document.body.scrollHeight; window.document.body.clientHeight; window.document.body.clientWidth; 通过事件来获得鼠标位置主要有这些: e.layerX; e.layerY; e.pageX; e.pageY; e.screenX; e.screenY; e.offsetX; e.offsetY; e.clientX; e.clientY; //获得对象相对于父级的位置 obj .offsetLeft; obj .offsetTop; obj .offsetWidth; obj .offsetHeight;
下面是各浏览器关于页面位置的全部属性,包括获得鼠标位于该位置的实时x,y坐标：getPosition.html <body> <div id="object" style="background-color:green;color:white" onmousemove="getPosition(this,event);" >object,请在此处移动鼠标</div> <div id="showinfo"></div> <script>
// get absolute Left position //建立者:[email protected] //返回对象位于窗口的绝对左边距离 function getAbsoluteLeft( ob ){ if(!ob){return null;} var obj = ob; var objLeft = obj .offsetLeft; while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){ objLeft += obj .offsetParent.offsetLeft; obj = obj .offsetParent; } return objLeft ; }
// get absolute TOP position //建立者:[email protected] //返回对象位于窗口的绝对上边距离 function getAbsoluteTop( ob ){ if(!ob){return null;} var obj = ob; var objTop = obj .offsetTop; while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){ objTop += obj .offsetParent.offsetTop; obj = obj .offsetParent; } return objTop ; }
var str=""; str+="<br><font color=gray>window.screen.width</font> "+window.screen.width; str+="<br><font color=gray>window.screen.height</font> "+window.screen.height; str+="<br><font color=gray>window.document.body.offsetWidth</font> "+window.document.body.offsetWidth; str+="<br><font color=gray>window.document.body.offsetHeight</font> "+window.document.body.offsetHeight; str+="<br><font color=gray>window.screen.availWidth</font> "+window.screen.availWidth; str+="<br><font color=gray>window.screen.availHeight</font> "+window.screen.availHeight; str+="<br><font color=gray>window.document.body.offsetWidth</font> "+window.document.body.offsetWidth; str+="<br><font color=gray>window.document.body.offsetHeight</font> "+window.document.body.offsetHeight; str+="<br><font color=gray>window.screen.availWidth</font> "+window.screen.availWidth; str+="<br><font color=gray>window.screen.availHeight</font> "+window.screen.availHeight; str+="<br><font color=gray>window.document.body.scrollWidth</font> "+window.document.body.scrollWidth; str+="<br><font color=gray>window.document.body.scrollHeight</font> "+window.document.body.scrollHeight; str+="<br><font color=gray>window.document.body.clientHeight</font> "+window.document.body.clientHeight; str+="<br><font color=gray>window.document.body.clientWidth</font> "+window.document.body.clientWidth;
var str1=""; function getPosition(obj,e){ str1=""; //str1 += str; str1+="<br><font color=gray>e.layerX</font> "+e.layerX; str1+="<br><font color=gray>e.layerY</font> "+e.layerY; str1+="<br><font color=gray>e.pageX</font> "+e.pageX; str1+="<br><font color=gray>e.pageY</font> "+e.pageY; str1+="<br><font color=gray>e.screenX</font> "+e.screenX; str1+="<br><font color=gray>e.screenY</font> "+e.screenY; str1+="<br><font color=gray>e.offsetX</font> "+e.offsetX; str1+="<br><font color=gray>e.offsetY</font> "+e.offsetY; str1+="<br><font color=gray>e.clientX</font> "+e.clientX; str1+="<br><font color=gray>e.clientY</font> "+e.clientY; // str1+="<br><font color=gray>obj.offsetLeft</font> "+ obj .offsetLeft; str1+="<br><font color=gray>obj.offsetTop</font> "+ obj .offsetTop; str1+="<br><font color=gray>obj.offsetWidth</font> "+ obj .offsetWidth; str1+="<br><font color=gray>obj.offsetHeight</font> "+ obj .offsetHeight;
str1+="<hr> 绝对左边距"+ getAbsoluteLeft(obj); str1+="<hr> 绝对上边距"+ getAbsoluteTop(obj); document.getElementById("showinfo").innerHTML = str1;
}
document.write( str ); //alert(str) </script>