js-获取DOM尺寸、位置

获取DOM尺寸、位置

查看滚动条的滚动位置

• window.pageXOffset / window.pageYOffset(IE8及其以下版本不支持)
• document.body/documentElement.scrollLeft/scrollTop
  • 兼容性比较混乱，使用时通常取两个属性值相加，因为不可能存在两个同时有值。
• 封装兼容性方法getScrollOffset():

function getScrollOffset(){
        if(window.pageXOffset){
            return{
                x:window.pageXOffset,
                y:window.pageYOffset
            }
        }else{
            return{
                x:document.documentElement.scrollLeft,
                y:document.documentElement.scrollTop
            }
        }
    }

查看可视化窗口的尺寸

• window.innerWidth/innerHeight
  • IE8及其以下版本不兼容
• document.documentElement.clientWidth/clientHeight
  • 标准模式下，任意浏览器兼容
• document.body.clientWidth/clientHeight
  • 适合怪异(混杂)模式下浏览器
• 封装兼容性方法，getViewportOffset:

function getViewportOffset(){
        if(window.innerHeight){
            return{
                width:window.innerWidth,
                height:window.innerHeight
            }
        }else{
            if(document.compatMode == 1){
                return{
                    width:document.documentElement.clientWidth,
                    height:document.documentElement.clientHeght
                }
            }else{
                return{
                    width:document.body.clientWidth,
                    height:document.body.clientHeght
                }
            }
        }
    }

PS:

• 限定了浏览器的渲染模式为标准模式，如果在Html文件删去这一句代码，则采用怪异(混杂)模式。
• 标准模式下，网页按照现行的浏览器版本渲染；
• 怪异模式下，网页会选择浏览器版本向后兼容的方式渲染。

查看元素的几何尺寸

• domEle.getBoundingClientRect();
  • 兼容性很好。
  • 返回的是一个对象，里面包括该元素的bottom,left,top right（bottom,left表示元素左下角坐标X,y值）；width,height（在老版本IE浏览器中不兼容）。
  • 返回的结果并不是实时的。

查看元素的尺寸

• domEle.offsetWidth, domELe.offHeight

查看元素的位置

• domEle.offsetLeft,domEle.offTop
  • 对于无定位父级的元素，返回相对于文档的位置；对于有定位父级的元素，返回相对于最近的有定位父级元素的位置。
• domEle.offsetPerent
  • 返回最近的有定位的父级元素，如果没有就返回body;body.offsetParent为null.

让滚动条滚动

• window上有三个方法：scroll(),scrollTo(); scrollBy()
• 三个方法的功能类似，都是在括号里面传入x,y的值。
• 区别：前两个都是滚动到x,y坐标；scrollBy(),是在之前的基本数据上做累加。