得到对象以及鼠标在页面的绝对位置(转)
获取页面元素的位置对我们很重要，如何获得元素位于页面的绝对位置呢？通过offsetLeft,offsetTop可以获得对象的左边距和上边距，但是不同浏览器因为对象处于的地位而会有些不同的解析，例如有些时候计算边距时没有把parent的边距计算进去，下面的函数将可以获得对象绝对的位置。
如下：
// get absolute Left position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对左边距离
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
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对上边距离
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
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对左边距离
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
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对上边距离
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>
如下：
// get absolute Left position
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对左边距离
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
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对上边距离
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
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对左边距离
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
//建立者:jiarry@hotmail.com
//返回对象位于窗口的绝对上边距离
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>
