Sealyu

--- 博客已迁移至: http://www.sealyu.com/blog

  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  618 随笔 :: 87 文章 :: 225 评论 :: 0 Trackbacks
用 Javascript 获取指定页面元素的位置
用 Javascript 获取指定页面元素的位置是一个非常常见的需求，本文介绍的方法能够准确返回一个元素相对于整个文档左上角的坐标，即元素的 top 、left 的位置，而且能够兼容浏览器，相信对新手非常有用。

  1. <script language="javascript" type="text/javascript">  
  2.   
  3. <!--    
  4.   
  5. // 说明：用 Javascript 获取指定页面元素的位置   
  6.   
  7. // 整理：http://www.codebit.cn   
  8.   
  9. // 来源：YUI DOM    
  10.   
  11. function getElementPos(elementId) {  
  12.   
  13.     var ua = navigator.userAgent.toLowerCase();       
  14.   
  15.     var isOpera = (ua.indexOf('opera') != -1);       
  16.   
  17.     var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof        
  18.   
  19.     var el = document.getElementById(elementId);   
  20.   
  21.           
  22.   
  23.     if(el.parentNode === null || el.style.display == 'none'){ return false; }        
  24.   
  25.     var parent = null;  
  26.   
  27.     var pos = [];     //不定长数组？  
  28.   
  29.     var box;        
  30.   
  31.     if(el.getBoundingClientRect){  //IE       
  32.   
  33.         box = el.getBoundingClientRect();          
  34.   
  35.         var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);          
  36.   
  37.         var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);            
  38.   
  39.         return {x:box.left + scrollLeft, y:box.top + scrollTop};       
  40.   
  41.     }else if(document.getBoxObjectFor){   // gecko                  
  42.   
  43.         box = document.getBoxObjectFor(el);                       
  44.   
  45.         var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0;           
  46.   
  47.         var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0;            
  48.   
  49.         pos = [box.x - borderLeft, box.y - borderTop];       
  50.   
  51.     }else{    // safari & opera       
  52.   
  53.         pos = [el.offsetLeft, el.offsetTop];          
  54.   
  55.         parent = el.offsetParent;           
  56.   
  57.         if (parent != el) {  
  58.   
  59.             while (parent) {                   
  60.   
  61.                 pos[0] += parent.offsetLeft;                 
  62.   
  63.                 pos[1] += parent.offsetTop;               
  64.   
  65.                 parent = parent.offsetParent;              
  66.   
  67.             }  
  68.   
  69.         }           
  70.   
  71.         if (ua.indexOf('opera') != -1  || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )){                
  72.   
  73.             pos[0] -= document.body.offsetLeft;               
  74.   
  75.             pos[1] -= document.body.offsetTop;           
  76.   
  77.         }        
  78.   
  79.     }              
  80.   
  81.     if (el.parentNode) {   
  82.   
  83.         parent = el.parentNode;   
  84.   
  85.     } else {   
  86.   
  87.         parent = null;   
  88.   
  89.     }         
  90.   
  91.     while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors          
  92.   
  93.         pos[0] -= parent.scrollLeft;           
  94.   
  95.         pos[1] -= parent.scrollTop;        
  96.   
  97.         if (parent.parentNode) {   
  98.   
  99.             parent = parent.parentNode;   
  100.   
  101.         } else {   
  102.   
  103.             parent = null;   
  104.   
  105.         }       
  106.   
  107.     }       
  108.   
  109.     return {x:pos[0], y:pos[1]};  
  110.   
  111. }  //-->   
  112.   
  113. </script> 


第二种方法：
function WebForm_GetElementPosition(element) {
    var result = new Object();
    result.x = 0;
    result.y = 0;
    result.width = 0;
    result.height = 0;
    if (element.offsetParent) {
        result.x = element.offsetLeft;
        result.y = element.offsetTop;
        var parent = element.offsetParent;
        while (parent) {
            result.x += parent.offsetLeft;
            result.y += parent.offsetTop;
            var parentTagName = parent.tagName.toLowerCase();
            if (parentTagName != "table" &&
                parentTagName != "body" &&
                parentTagName != "html" &&
                parentTagName != "div" &&
                parent.clientTop &&
                parent.clientLeft) {
                result.x += parent.clientLeft;
                result.y += parent.clientTop;
            }
            parent = parent.offsetParent;
        }
    }
    else if (element.left && element.top) {
        result.x = element.left;
        result.y = element.top;
    }
    else {
        if (element.x) {
            result.x = element.x;
        }
        if (element.y) {
            result.y = element.y;
        }
    }
    if (element.offsetWidth && element.offsetHeight) {
        result.width = element.offsetWidth;
        result.height = element.offsetHeight;
    }
    else if (element.style && element.style.pixelWidth && element.style.pixelHeight) {
        result.width = element.style.pixelWidth;
        result.height = element.style.pixelHeight;
    }
    return result;
}
posted on 2009-02-23 11:34 seal 阅读(887) 评论(0)  编辑  收藏 所属分类: Javascript

只有注册用户登录后才能发表评论。
网站导航: