javaScript获取元素位置以及元素页面大小总结

js获取元素位置以及元素页面大小总结：

一：元素位置：

js中获取元素位置也就是元素的left以及top位置利用el.offset即可。el.offsetLeft以及el.offsetTop获取的是元素边框外部到目标位置距离；

而我们如果要获得元素相对于页面的绝对位置就不得不循环元素父元素然后将循环值相加得到的即为元素真实的绝对位置

代码如下：

获取元素相对页面位置

var getPos = function(o) {

    for(var _pos = {x: 0, y: 0}; o; o = o.offsetParent) {

        _pos.x += o.offsetLeft;

        _pos.y += o.offsetTop;

    }
    return _pos;
};

二：元素大小：

元素大小即元素的宽高，在获得元素大小时候分为隐藏以及显示两种处理方式：即display为none与非none；

显示效果可以直接用el.offsetWidth去获得，由于offsetWidth以及offsetHeight都是由ie最先支持的，不属于w3c标准，但是由于其传播性较广，致使其他浏览器都纷纷效仿实现。

也就是说：目前各大浏览器都对offsetWidth以及offsetHeight支持，并且效果是一样的，都是从元素边界开始计算即：padding+width+border;不过还是不排除个别浏览器的特立独行；

所以我们还是要兼容一下 以防万一:

var cssX=function(elem){  

    if(elem.style.width)return elem.style.width;  

    if(elem.currentStyle)return elem.currentStyle.width;   

    if(document.defaultView && document.defaultView.getComputedStyle)  

     return document.defaultView.getComputedStyle(elem,"").getPropertyValue("width");   

}

var cssY=function(elem){  

    if(elem.style.height)return elem.style.height;  

    if(elem.currentStyle)return elem.currentStyle.height;   

    if(document.defaultView && document.defaultView.getComputedStyle)  

     return document.defaultView.getComputedStyle(elem,"").getPropertyValue("height");   
}

对于可见元素获得元素大小可以用

var getWidth=el.offsetWidth||cssX(el),

    getHeight=el.offsetHeight||cssY(el);

对于隐藏元素，我们要获得其大小就需要先将其状态设置为可见然后得到大小，之后再将其隐藏即可：

var resetCSS=function( elem, prop ) {  

    var old = {};  

    for ( var i in prop ) {  

        old[ i ] = elem.style[ i ]; 

        elem.style[ i ] = prop[i];  

    }  

    return old;  

}  

var restoreCSS=function( elem, prop ) {  

    for ( var i in prop )  

        elem.style[ i ] = prop[ i ];  

} 

在这里我们先将元素本身的属性赋予old对象，然后将要设置的属性直接赋给元素。进而可以计算元素大小，之后用restoreCss再将元素style属性恢复即可；

综上：获取元素宽高如下：

var getClient=function(elem){

    if(elem.style.display!="none"){  

        return {width:elem.offsetWidth || parseInt(cssX(elem)),height:elem.offsetHeight || parseInt(cssY(elem)) };

    }  

    var old = zipCode.resetCSS( elem, {  

        display: '',  

        visibility: 'hidden',  

        position: 'absolute'  

    });

    var off ={width:elem.offsetWidth || parseInt(cssX(elem)),height:elem.offsetHeight || parseInt(cssY(elem)) };

    zipCode.restoreCSS( elem, old );  

    return off;  

}

三：页面大小

获取页面大小可以用scrollHeight以及scrollWidth，不过在没有滚动条时候浏览器对于clientHeight、clientWidth与scrollHeight、scrollWidth关系并不清晰：

有的浏览器认为两者相同：即使相同也分为结果为视口大小以及文档大小；不相同时候浏览器对两者解释也是因为视口大小还是文档大小存在差别；

不过这些差别我们可以不必去理会；因为要确定文档总高度，只需要取得两者中最大值即可：而对于视口大小，同理只需获取两者中最小值即可：

不过由于ie6之前版本以及混杂模式下，浏览器都是以body为整个文档大小去计算。所以我们还要稍加判断是否是混杂模式：

最终代码如下：

var getViewport=function(){

    var doc=document.compatMode=='BackCompat'?document.body:document.documentElement;//混杂模式用body否则用html文档对象

   return {width:Math.max(doc.scrollWidth,doc.clientWidth),height:Math.max(doc.scrollHeight,doc.clientHeight)}

}