JavaScript 获取 Div 的坐标

示例代码:

  1 <html>
  2     <head>
  3         <script>
  4             function CPos(x, y)
  5             {
  6                 this.x = x;
  7                 this.y = y;
  8             }
  9             /**
 10              * 得到对象的相对浏览器的坐标
 11              */
 12             function GetObjPos(ATarget)
 13             {
 14                 var target = ATarget;
 15                 var pos = new CPos(target.offsetLeft, target.offsetTop);
 16                  
 17                 var target = target.offsetParent;
 18                 while (target)
 19                 {
 20                     pos.x += target.offsetLeft;
 21                     pos.y += target.offsetTop;
 22                      
 23                     target = target.offsetParent
 24                 }
 25                 return pos;
 26             }
 27             
 28             function getElementPos(elementId){    
 29                 var ua = navigator.userAgent.toLowerCase();    
 30                 var isOpera = (ua.indexOf('opera') != -1);    
 31                 var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof    
 32                 var el = document.getElementById(elementId);    
 33                 if (el.parentNode === null || el.style.display == 'none') {    
 34                     return false;    
 35                 }    
 36                 var parent = null;    
 37                 var pos = [];    
 38                 var box;    
 39                 if (el.getBoundingClientRect) //IE    
 40                 {    
 41                     box = el.getBoundingClientRect();    
 42                     var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);    
 43                     var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);    
 44                     return {    
 45                         x: box.left + scrollLeft,    
 46                         y: box.top + scrollTop    
 47                     };    
 48                 }    
 49                 else    
 50                     if (document.getBoxObjectFor) // gecko        
 51                     {    
 52                         box = document.getBoxObjectFor(el);    
 53                         var borderLeft = (el.style.borderLeftWidth) ? parseInt(el.style.borderLeftWidth) : 0;    
 54                         var borderTop = (el.style.borderTopWidth) ? parseInt(el.style.borderTopWidth) : 0;    
 55                         pos = [box.x - borderLeft, box.y - borderTop];    
 56                     }    
 57                     else // safari & opera        
 58                     {    
 59                         pos = [el.offsetLeft, el.offsetTop];    
 60                         parent = el.offsetParent;    
 61                         if (parent != el) {    
 62                             while (parent) {    
 63                                 pos[0] += parent.offsetLeft;    
 64                                 pos[1] += parent.offsetTop;    
 65                                 parent = parent.offsetParent;    
 66                             }    
 67                         }    
 68                         if (ua.indexOf('opera') != -1 || (ua.indexOf('safari') != -1 && el.style.position == 'absolute')) 
 69              
 70             {    
 71                             pos[0] -= document.body.offsetLeft;    
 72                             pos[1] -= document.body.offsetTop;    
 73                         }    
 74                     }    
 75                 if (el.parentNode) {    
 76                     parent = el.parentNode;    
 77                 }    
 78                 else {    
 79                     parent = null;    
 80                 }    
 81                 while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled 
 82              
 83             ancestors    
 84                     pos[0] -= parent.scrollLeft;    
 85                     pos[1] -= parent.scrollTop;    
 86                     if (parent.parentNode) {    
 87                         parent = parent.parentNode;    
 88                     }    
 89                     else {    
 90                         parent = null;    
 91                     }    
 92                 }    
 93                 return {    
 94                     x: pos[0],    
 95                     y: pos[1]    
 96                 };    
 97             } 
 98  
 99  
100             function loadinfo(){
101                 alert( document.body.clientWidth );
102                 //alert( window.screen.width );
103                 alert( document.documentElement.clientWidth );
104                 var obj =  document.getElementById('tiao');
105                 alert(GetObjPos(obj)['x']); //x坐标
106                 alert(GetObjPos(obj)['y']); //y坐标
107                 
108                 alert( '右边距' + ( document.documentElement.clientWidth - GetObjPos(obj)['x'] ))
109                 alert( "=====================" ); 
110                 var xd = getElementPos("tiao");
111                 alert(xd.x);
112                 alert(xd.y);
113             }
114             
115             
116         </script>
117     </head>
118     <body onload="loadinfo();">
119         
120         <div style="margin-left:100px;">
121             <div id="tiao" style="margin-left:100px;">测试</div>
122         </div>
123         
124     </body>
125 </html>
View Code

知识扩展:

网页可见区域宽:document.body.clientWidth
网页可见区域高:document.body.clientHeight
网页可见区域宽:document.body.offsetWidth (包括边线的宽)
网页可见区域高:document.body.offsetHeight (包括边线的宽)
网页正文全文宽:document.body.scrollWidth
网页正文全文高:document.body.scrollHeight
网页被卷去的高:document.body.scrollTop
网页被卷去的左:document.body.scrollLeft
网页正文部分上:window.screenTop
网页正文部分左:window.screenLeft
屏幕分辨率的高:window.screen.height
屏幕分辨率的宽:window.screen.width
屏幕可用工作区高度:window.screen.availHeight
屏幕可用工作区宽度:window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量


IE,FireFox 差异如下:

IE6.0、FF1.06+:

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5:
clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下:CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽: document.body.clientWidth
网页可见区域高: document.body.clientHeight
网页可见区域宽: document.body.offsetWidth (包括边线的宽)
网页可见区域高: document.body.offsetHeight (包括边线的高)
网页正文全文宽: document.body.scrollWidth
网页正文全文高: document.body.scrollHeight
网页被卷去的高: document.body.scrollTop
网页被卷去的左: document.body.scrollLeft
网页正文部分上: window.screenTop
网页正文部分左: window.screenLeft
屏幕分辨率的高: window.screen.height
屏幕分辨率的宽: window.screen.width
屏幕可用工作区高度: window.screen.availHeight
屏幕可用工作区宽度: window.screen.availWidth

-------------------

技术要点
本节代码主要使用了Document对象关于窗口的一些属性,这些属性的主要功能和用法如下。

要得到窗口的尺寸,对于不同的浏览器,需要使用不同的属性和方法:若要检测窗口的真实尺寸,在Netscape下需要使用Window的属性;在IE下需要深入Document内部对body进行检测;在DOM环境下,若要得到窗口的尺寸,需要注意根元素的尺寸,而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。

引用:http://blog.csdn.net/freecodetor/article/details/2954560

posted @ 2013-10-16 07:05  Be here with you!  阅读(1818)  评论(0编辑  收藏  举报