元素大小
1.偏移量
元素的可见大小由其高度，宽度决定，包括所有内边距，滚动条和边框大小(不包括外边框)。
offsetHeight:
元素在垂直方向上占用的空间大小，以像素计。包括元素的高度,水平滚动条的高度，上下边框的高度
offsetWidth:
元素在上水平方向上占用的空间大小,以像素计。包括元素的宽度,水平滚动条的宽度，上下边框的宽度
offsetLeft:
元素的左外边框至包含元素的左内边框之间的像素距离。
offsetTop:
元素的上外边框至包含元素的上内边框之间的像素距离。
2.offsetParent
这个属性很关键
取到的值的几种可能性
2.1当元素本身为absolute或者relative,父级元素不包含定位时
ie7返回html
其他浏览器返回body
2.2当元素本身含有fixed
因为固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null
ff 返回body
chrome 返回 null
ie返回null
2.3当元素本身和父级元素都不包含定位时
ff 返回body
chrome 返回 body
ie7以上及混杂模式都返回body
ie7返回div ,为box1，为当前元素最近的父元素
2.4当元素本身不包含定位,父级元素包含定位时
所有浏览器返回离当前元素最近的父级元素。
2.5获取元素的左偏移量
要想知道某个元素在页面上的偏移量，将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加，直至根元素。
function getElementLeft(ele) {
var actualLeft = ele.offsetLeft;//当前元素在左偏移量
var current = ele.offsetParent;//当前元素的父元素，即包含元素
while(current !== null) {
actualLeft += current.offsetLeft;//取得父元素的左偏移量
current = current.offsetParent;//取得父元素的父元素
}
return actualLeft;
}
2.6获取元素的上偏移量
function getElementTop(ele) {
var actualTop = ele.offsetTop;
var current = ele.offsetParent;
while(current !== null) {
actualTop += current.offsetTop;
current = current.offsetParent;
}
return actualTop;
}
对于简单的CSS布局的页面，这2函数可以得到非常精确的结果，
对于使用表格和内嵌框架中的页面，由于不同浏览器实现这些元素的方式不同，因此就不太准确了
由上面代码对比可知，重复访问偏移量属性需要耗费大量的性能，所以要尽量避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能
3.客户区大小
客户区大小指的是元素内容及其内边距所占据的空间大小。
有clientWidth和clientHeight个属性
clientWidth属性等于元素内容区域宽度加上padding左右的宽度。
clientHeight属性等于元素内容区域高度加上padding上下的高度。
4.跨浏览器获取视口大小
function getViewPort() {
var pageWidth = window.innerWidth,
pageHeight = window.innerHeight;
if(typeof pageWidth != "number") {
if(document.compatMode == "CSS1Compat") { //若文档为标准模式
pageWidth = document.documentElement.clientWidth;
pageHeight = document.documentElement.clientHeight;
} else { //若文档为混杂模式
pageWidth = document.body.clientWidth;
pageHeight = document.body.clientHeight;
}
}
return [pageWidth,pageHeight]; //getViewPort()[0]为pageWidth,getViewPort()[1]为pageHeight
}
