用js获取网页中种元素的高宽值

 

1.获取dom元素的位置

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

 

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等属性了，代码如下：

 

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。

 

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); 

 

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

先定义两个方法，显示元素和恢复元素状态：

 

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 );

 

 

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

 

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.获取窗口高宽

 

 

function getWindowWidth(){

    var de = document.documentElement;
    return self.innerWidth || ( de && de.clientWidth ) || document.body.clientWidth;

} 

 

高度类推

 

5.获得页面高宽

这个可以利用body.scrollWidth属性就行了。

 

function getPageWidth(){

    return document.body.scrollWidth;

} 

 

 

高度类推

 

6.获取滚动条的位置

 

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

 

竖向位置类推