◆将ClientRect对象的left、top属性分别加上scrollLeft和scrollTop，就能获取Dom元素的X/Y坐标了。但对于IE8之前的IE版本在很多情况，下面要对这个值进行一些调整，有三种情况，下面来分别看一下：
1.IE6的标准模式下不需要调整；
2.所有怪异模式下为取document的当前borderLeftWidth和borderTopWidth值做调整，分别加在X/Y坐标值上；
3.其他的情况都分别在X/Y坐标值上加上2；
这样就可以获取最后准确的X/Y坐标了。
如果所有的浏览器都能如此就好了，可惜有些浏览器（FF2、Safari）不支持getBoundingClientRect方法。需要通过一级级查找和计算offsetParent来获取X/Y坐标值。这里首先介绍什么是元素的offsetParent属性。
广州网站建设,网站建设,广州网页设计,广州网站设计
◆offsetParent属性是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的与容器元素。首先说明一下CSS定位，是指对元素设置position属性为absolute、relative或fixed(IE6除外)，还有一个问题是元素在table元素中时会有不同的情况。下面是我的一些归纳，不全之处望大家指出：
1.元素不在table元素中，且元素及其所有上级元素都未进行CSS定位时，这个元素的offsetParent属性为根元素（Body）；
2.元素本身没进行CSS定位，而出现在table中或有上级元素进行了CSS定位，那么当向上先达到TD元素时该元素的offsetParent属性为TD元素；当向上先达到进行了CSS定位的上级元素时该元素的offsetParent属性为该上级元素；
3.无论元素在不在table中，只要元素本身进行了CSS定位，有上级元素进行了CSS定位的则元素的offsetParent属性为该上级元素，没有上级素进行了CSS定位的则元素的offsetParent属性为根元素；
知道了offsetParent属性的含义，就可以通过offsetParent属性来一级级的计算X/Y坐标了。一种比较简单的while循环：
- varnode;/*求坐标的元素*/
- varxy=[];/*保存XY坐标*/
- while((nodenode=node.offsetParent)){
- xy[0]+=node.offsetLeft;
- xy[1]+=node.offsetTop];
- }
◆通过这一个循环就能累计元素每级offsetParent属性元素的偏移量，但这个偏移量在累加的过程中没有计算每级父元素有滚动条的情况，最后还要同getBoundingClientRect方法一样加上页面滚动值（这里scrollLeft和scrollTop）。现在先来累计计算元素每上级元素的滚动条情况，首先判断元素本身是不是设置了position为fixed：
1.设置了则不用计算每上级元素的滚动条情况，但需要对Opera和其他浏览器做区分，Opera浏览器减去scrollLeft和scrollTopxy[0]-=scrollLeft;xy[1]-=scrollTop;，其他情况是加上scrollLeft和scrollTop。
- xy[0]+=scrollLeft;xy[1]+=scrollTop;
2.未设置时就需要累计计算元素每上级元素的滚动条，通过一个循环里累加：
- while((nodenode=node.parentNode)&&node.tagName){
- scrollTop=node.scrollTop;
- scrollLeft=node.scrllLeft;
- if(scrollTop||scrollLeft){
- xy[0]-=scrollLeft;
- xy[1]-=scrollTop;
- }
- }
最后机上页面滚动值
广州网站建设,网站建设,广州网页设计,广州网站设计
- xy[0]+=scrollLeft;xy[1]+=scrollTop;
这样最后就可以在不支持getBoundingClientRect方法的浏览器下获取元素的X/Y坐标了。
总结：
如果浏览器支持getBoundingClientRect方法，通过该方法再加上页面滚动条的偏移就能获取元素的X/Y了（不同浏览器需要微调），如果不支持getBoundingClientRect方法，则需要通过循环该元素的每级offsetParent属性来累计偏移量，再通过每个父级元素的滚动条来调整，最后再加上页面滚动条的偏移来获取元素的X/Y坐标。获取X/Y坐标的方式还有很多，可能不尽相同，我这里主要是基于YUI里面的思想和方法。
