说坐标就要考虑参考点,首先要理解获取元素坐标是以文档(html元素)的左上角为参考点,不是浏览器左上角
案例分析
<div id="testid" style="border:solid 10px red; width:400px; height:200px; position:relative; overflow:auto; ">
testid
<div id="testid1" style="border:solid 5px green; position:absolute; width:200px; height:300px; top:70px; left:100px ">
testid1
</div>
</div>
<input type="button" value="点击案例1" onclick="eyejsTest('testid1')" />
<input type="button" value="点击案例2" onclick="eyejsTest2('testid1')" />
<input type="button" value="点击案例3" onclick="eyejsTest3('testid1')" />
----------------------------------------
第一种方法eyejsGetNode1,是很常用的方法,可这种写法在某些情况下是不对的
准确地说只能应用在该元素和所有的父级节点不能有边框和滚动,否则获取到的坐标就是不正确的
必需准确地理解offsetTop和offsetLeft, 以offsetTop为例,offsetTop是本元素的外侧到直接父级的内侧的距离(如果有滚动部分,包括滚动部分)
请看详解offsetTop,offsetLeft,offsetParent并给于案例
<script type="text/javascript">
function $(id){return document.getElementById(id);}
var eyejsGetNode1=function(id){
var obj=$(id);
var pos =[];
pos =[obj.offsetLeft,obj.offsetTop];//
var parent = obj.offsetParent;
while(parent){
pos[0] += parent.offsetLeft;
pos[1] += parent.offsetTop;
parent=parent.offsetParent;
}
return {x:pos[0],y:pos[1]};
}
var eyejsTest=function(id){
var node=eyejsGetNode1(id);
alert("Y坐标"+node.y);
}
</script>
点击弹出元素的坐标,再滚动后,再点击弹出元素的坐标
可以发现:该元素的已经发现变化坐标, 可计算结果并没有变化,(应该减去滚动部分)
<div style="margin-top:20px; border-top:solid 1px red; width:500px;">案例二</div>
<script type="text/javascript">
/*方法二:弥补方法一的缺点 加上边框部分和除去元素滚动部分,但不能除去body滚动部分*/
var $ = function (id) {return "string" == typeof id ? document.getElementById(id) : id;};
var isIE = (document.all) ? true : false;
if(!isIE){
HTMLElement.prototype.__defineGetter__("currentStyle", function () {
return this.ownerDocument.defaultView.getComputedStyle(this, null);
});
}
var eyejsGetNode2=function(id){
var obj=$(id);
var x=0,y=0;
var scrollX=0,scrollY=0;
if(obj.offsetParent){
if( obj.offsetParent.tagName.toLowerCase()!="body"&&obj.offsetParent.tagName.toLowerCase()!="html" ){
scrollX=obj.offsetParent.scrollLeft;
scrollY=obj.offsetParent.scrollTop;
//去掉元素滚动部分,但是不能除掉html或body的滚动部分,理解obj.offsetParent的指向哪个元素,最顶级的父级元素是IE是HTMLhtmlElement而
//FF是HTMLbodyElement 因此要这样判断
}
}
x+=obj.offsetLeft-scrollX;
y+=obj.offsetTop-scrollY;
while(obj=obj.offsetParent){
scrollX=0;scrollY=0;
var borderLeftWidth=0;
var borderTopWidth=0;
if(obj.tagName.toLowerCase()!="body"||obj.tagName.toLowerCase()!="html"){
borderLeftWidth=!isNaN(parseInt(obj.currentStyle.borderLeftWidth))?parseInt(obj.currentStyle.borderLeftWidth):0;
borderTopWidth=!isNaN(parseInt(obj.currentStyle.borderTopWidth))?parseInt(obj.currentStyle.borderTopWidth):0;
}
if(obj.offsetParent){
if( obj.offsetParent.tagName.toLowerCase()!="body"&&obj.offsetParent.tagName.toLowerCase()!="html" ){
scrollX=obj.offsetParent.scrollLeft;
scrollY=obj.offsetParent.scrollTop;
}
}
//alert(obj.offsetParent);
x+=obj.offsetLeft+borderLeftWidth-scrollX;
y+=obj.offsetTop+borderTopWidth-scrollY;
if(obj.tagName.toLowerCase()=="html")
break;
}
return {"x":x,"y":y};
}
var eyejsTest2=function(id){
var node=eyejsGetNode2(id);
alert("Y坐标"+node.y);
}
</script>
<div>
点击弹出元素的坐标,再滚动后,再点击弹出元素的坐标
可以发现:该元素的已经发现变化坐标, 计算结果也着随变化
但是你如果先放在IE下测试,再放在FF测试你会发现结果不一样
为什么呢?去掉ID为testid的元素的边框样式,再试试,会发现结果一样了
<div>
</div>
----
案例三:
利用浏览器内置的获取元素坐标函数getBoundingClientRect
//此方法在IE和Firefox/3.0.12版本下通过
<script type="text/javascript">
var eyejsGetNode3=function(id){
var el=$(id);
var pos =[];
var box=null;
if(el.getBoundingClientRect){
box = el.getBoundingClientRect();
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
return {x:box.left + scrollLeft, y:box.top + scrollTop}; //
}
return {x:0,y:0};
}
var eyejsTest3=function(id){
var node=eyejsGetNode3(id);
alert("Y坐标"+node.y);
}
</script>
案例下载地址:
http://www.eyejs.com/html/66/n-166.html