用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;
}
 

竖向位置类推

 

你可能感兴趣的:(css,浏览器)