javascript之窗口属性和dom尺寸

DOM基本操作
查看滚动条的滚动距离
window.pageXOffset / window.pageYOffset
IE8及IE8以下不兼容

document.body/document.documentElement.scrollLeft / scrollTop
兼容性比较混乱，用时取两个值相加，因为不可能存在两个同时有值

兼容封装，求滚动轮滚动距离 getrScrollOffset()

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

查看窗口可视区尺寸
window.innerWidth/innerHeight
IE8及IE8以下不兼容

document.documentElement.clientWidth/clientHeight
标准模式下，任意浏览器都兼容

document.body.clientWidth/clientHeight
适用于怪异模式下的浏览器(怪异模式，即向下兼容。去掉 <!DOCTYPE html> 就变成怪异模式)

兼容封装，返回浏览器可视尺寸 getViewportOffset()

function getViewportOffset() {
　　if(window.innerWidth) {
　　　　return {
　　　　　　x: window.innerWidth,
　　　　　　y: window.innerHeight
　　　　}
　　}else {
　　　　if(document.compatMode === 'BackCompat') {
　　　　　　return {
　　　　　　　　x: document.body.clientWidth,
　　　　　　　　y: document.body.clientHeight
　　　　　　}
　　　　}else {
　　　　　　return {
　　　　　　　　x: document.documentElement.clientWidth,
　　　　　　　　y: document.documentElement.clientHeight
　　　　　　}
　　　　}
　　}
}

另外还有一些方法

查看元素的几何尺寸
domEle.getBoundingClientRect()
兼容性很好
该方法返回一个对象，对象里有left,top,right,bottom,width,height属性。left,top指元素左上角的x和y坐标，right,bottom指的是元素右下角的x和y坐标、
width和height属性老IE未实现
返回的结果并不是‘实时的’

查看元素尺寸(视觉尺寸，content+padding+border)
dom.offsetWidth/offsetHeight

查看元素位置
dom.offsetLeft/offsetTop
对于无定位父级的元素，返回相对文档的坐标。对于有父级定位的，返回相对于最近的有定位的父级的坐标

dom.offsetParent
返回最近的有定位的父级，如无，返回body, body.offsetParent返回null

让滚动条滚动方法

window上有三个方法
scroll(),scrollTo()这两一样 scrollBy()
三个方法功能类似，用法都是将x,y坐标传入，即实现让滚动轮滚动到当前位置
区别： scrollBy()会在之前数据基础上累加

end ！！！