获取元素相对位置 offset

最新推荐文章于 2024-04-09 01:27:53 发布

最新推荐文章于 2024-04-09 01:27:53 发布 · 276 阅读

JavaScript 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了一个JavaScript函数，该函数用于获取页面上指定DOM元素相对于其位置容器的偏移量，包括左偏移（left）和顶偏移（top）。函数考虑了多种浏览器特性，并针对IE6/7等特定版本进行了兼容性处理。


/**
 * @description 获取元素在位置容器中的偏移。
 * @author shawn 2012-02-17
 * @param {String|HtmlElement} el DOM元素或者是id
 * @return {Object} {left:offsetLeft,top:offsetTop}
 */
function getOffset(el){
    if(typeof el == 'string'){
        el = document.getElementById(el);
    }
    var self = arguments.callee;
    if(!self.init){
        var ua = navigator.userAgent;
        if(/MSIE ([^;]+)/.test(ua)){
            self.isIE = true;
            self.ieVer = parseInt(RegExp.$1);
        }
        self.getStylePro = function(target,property){
            if(self.isIE){
                if(property == 'float'){
                   property = 'styleFloat';  
                }
                return target.currentStyle[property];
            }else{
                if(property == 'float'){
                   property = 'cssFloat';  
                }
                return document.defaultView.getComputedStyle(target,null)[property];
            }
        };
        self.init = true;
    }
    var top = el.offsetTop,
        left = el.offsetLeft;

    var op = el.offsetParent;
    var t = 0,l = 0;
    while(op){
        var tag = op.tagName.toUpperCase();
        if("#TABLE#THEAD#TBODY#TH#TR#TD".indexOf('#'+tag) != -1){
            t += op.offsetTop;
            l += op.offsetLeft;
        }
        op = op.offsetParent;
    }
    var bdLeft = 0,
        bdTop = 0;
    var p = el.offsetParent;//parentNode;
    if(self.isIE && self.ieVer < 8){
         while(p && p != document.body){
             var pos = self.getStylePro(p,'position');
             if('relative#absolute#fixed'.indexOf(pos) != -1){
                break;
             }   
             var fl = self.getStylePro(p,'float');
             if(fl == 'left' || fl == 'right'){
                left += p.offsetLeft ;
                top += p.offsetTop;
                //TODO IE6/7下， 不知道什么原因，得到的Left、top少了1px。
                bdLeft =  1;
                bdTop =  1;
             }
             p = p.offsetParent;//.parentNode;
        }
        if(p == document.body){
            //如果直接以BODY为参照物，需要加上body默认的空白 。
            left += document.body.offsetLeft;
            top += document.body.offsetTop;
        }
    }
    return {'left':(left+l),'top':(top+t)};
}