软件开发|编程技术|编程代码|编程入门先学什么—程序设计语言

javascript获得DOM元素X,Y坐标的函数

javascript获得DOM元素X,Y坐标的函数

以下是YUI用的函数:

Js代码 
  1. isSafari = (document.childNodes && !document.all && !navigator.taintEnabled);  
  2.     var getXY = function(el) {  
  3.         if (document.documentElement.getBoundingClientRect) { // IE  
  4.             var box = el.getBoundingClientRect();  
  5.   
  6.             var rootNode = el.ownerDocument;  
  7.             return [box.left + getDocumentScrollLeft(rootNode), box.top +  
  8.                     getDocumentScrollTop(rootNode)];  
  9.         } else {  
  10.             var pos = [el.offsetLeft, el.offsetTop];  
  11.             var parentNode = el.offsetParent;  
  12.   
  13.             // safari: subtract body offsets if el is abs (or any offsetParent), unless body is offsetParent  
  14.             var accountForBody = (isSafari &&  
  15.                     el.style['position'] == 'absolute' &&  
  16.                     el.offsetParent == el.ownerDocument.body);  
  17.   
  18.             if (parentNode != el) {  
  19.                 while (parentNode) {  
  20.                     pos[0] += parentNode.offsetLeft;  
  21.                     pos[1] += parentNode.offsetTop;  
  22.                     if (!accountForBody && isSafari &&   
  23.                             parentNode.style['position'] == 'absolute' ) {   
  24.                         accountForBody = true;  
  25.                     }  
  26.                     parentNode = parentNode.offsetParent;  
  27.                 }  
  28.             }  
  29.   
  30.             if (accountForBody) { //safari doubles in this case  
  31.                 pos[0] -= el.ownerDocument.body.offsetLeft;  
  32.                 pos[1] -= el.ownerDocument.body.offsetTop;  
  33.             }   
  34.             parentNode = el.parentNode;  
  35.   
  36.             // account for any scrolled ancestors  
  37.             while ( parentNode.tagName && !/^body|html$/i.test(parentNode.tagName) )   
  38.             {  
  39.                // work around opera inline/table scrollLeft/Top bug  
  40.                if (parentNode.style['display'].search(/^inline|table-row.*$/i)) {   
  41.                     pos[0] -= parentNode.scrollLeft;  
  42.                     pos[1] -= parentNode.scrollTop;  
  43.                 }  
  44.                   
  45.                 parentNode = parentNode.parentNode;   
  46.             }  
  47.   
  48.             return pos;  
  49.         }  
  50.     }  
  51.   
  52.     /** 
  53.      * Returns the left scroll value of the document  
  54.      * @method getDocumentScrollLeft 
  55.      * @param {HTMLDocument} document (optional) The document to get the scroll value of 
  56.      * @return {Int}  The amount that the document is scrolled to the left 
  57.      */  
  58.     getDocumentScrollLeft = function(doc) {  
  59.         doc = doc || document;  
  60.         return Math.max(doc.documentElement.scrollLeft, doc.body.scrollLeft);  
  61.     },   
  62.   
  63.     /** 
  64.      * Returns the top scroll value of the document  
  65.      * @method getDocumentScrollTop 
  66.      * @param {HTMLDocument} document (optional) The document to get the scroll value of 
  67.      * @return {Int}  The amount that the document is scrolled to the top 
  68.      */  
  69.     getDocumentScrollTop = function(doc) {  
  70.         doc = doc || document;  
  71.         return Math.max(doc.documentElement.scrollTop, doc.body.scrollTop);  
  72.     }  

 下面是精简版:

Js代码 
  1. function getX(obj){  
  2.         return obj.offsetLeft + (obj.offsetParent ? getX(obj.offsetParent) : obj.x ? obj.x : 0);  
  3.     }          
  4.     function getY(obj){  
  5.         return (obj.offsetParent ? obj.offsetTop + getY(obj.offsetParent) : obj.y ? obj.y : 0);  
  6.     }  

 不过只支持IE和FF