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 ！！！
