js 元素位置

Js代码
 

1.获取dom元素的位置
    利用offsetParent属性，获得元素相对于offsetParent的位置，再继续获取offsetParent元素的位置，两个位置叠加起来便是要求的值了。获取offsetParent的位置时使用的是同一方法，这样便形成递归。

Js代码
function pageX(elem){ 
 
    return elem.offsetParent ?elem.offsetLeft + pageX( elem.offsetParent ) : elem.offsetLeft; 
 
} 
 
 
function pageY(elem){ 
 
    return elem.offsetParent?elem.offsetTop + pageY(elem.offsetParent):elem.offsetTop; 
 
}  
2.获取dom元素相对于父节点的位置
    不同浏览器对offsetParent的解释不一样，所以不能单纯用offsetTop和offsetLeft来获取。可以利用第一个方法，将父节点的位置减去本身节点的位置，这样便得到相对于父节点的编移量了。但如果浏览器将offsetParent解释成父节点，就可以直接使用offsetTop等属性了，代码如下：

Js代码
function parentX(elem){ 
 
     return elem.parentNode==elem.offsetParent?elem.offsetLeft : pageX(elem)-pageX(elem.parentNode); 
 
}  

parentY方法类似。

3.获取dom元素本身的高和宽
    这个稍微有点复杂，需要考虑到不同情况。
    第一种情况：元素是显示的，即elem.style.display!="none"
   可以利用offsetWidth属性，如果没有该属性，则可以计算出元素在css在的高宽，利用document.defaultView.getComputedStyle和elem.currentStyle.width。

Js代码
function cssX(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 w = offsetWidth || cssX(elem);  

    考虑第二种情况：元素被隐藏了，直接获取高宽是不行的，所以需要，显示元素，再获取高宽，然后再隐藏元素，恢复之前的状态。
先定义两个方法，显示元素和恢复元素状态：

Js代码
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 ]; 
} 
 
//保存元素的css值，并显示元素 
 
var old = resetCSS( elem, { 
        display: '', 
        visibility: 'hidden', 
        position: 'absolute' 
    }); 
 
//获得元素高宽 
    var w = elem.clientWidth || cssX(elem); 
 
//恢复元素样式 
    restoreCSS( elem, old ); 


这样，便可以编写一个获得元素宽度的方法了：

Js代码
function getWidth(elem){ 
 
    if(elem.style.display!="none"){ 
        return elem.offsetWidth || parseInt(cssX(elem)); 
    } 
    var old = resetCSS( elem, { 
        display: '', 
        visibility: 'hidden', 
        position: 'absolute' 
    }); 
    var w = elem.clientWidth || parseInt(cssX(elem)); 
    restoreCSS( elem, old ); 
    return w; 
 
} 
 
要获取元素的高度类推。 

4.获取窗口高宽


Js代码
function getWindowWidth(){ 
 
    var de = document.documentElement; 
    return self.innerWidth || ( de && de.clientWidth ) || document.body.clientWidth; 
 
}  

高度类推

5.获得页面高宽
这个可以利用body.scrollWidth属性就行了。

Js代码
function getPageWidth(){ 
 
    return document.body.scrollWidth; 
 
}  


高度类推

6.获取滚动条的位置

Js代码
var scrollX=function() { 
    var de = document.documentElement; 
    return self.pageXOffset || ( de && de.scrollLeft ) || document.body.scrollLeft; 
} 

竖向位置类推