这4个属性（以及这几个衍生的属性）几乎所有HTML动画都和这几个属性或者与有关。
我们先列出这些属性和这样相关的属性
width height top left 相关属性 position
offset系列
offsetWidth offsetHeight offsetTop offsetLeft 相关属性 offsetParent
scroll 系列
scrollWidth scrolltHeight scrollTop scrollLeft
client 系列
clientWidth clientHeight clientTop clientLeft
style.width : 在没有显示设置width的时候，这个值是等于””并没有办法获取到实际的宽度
style.height: 同width,没有显式设置时是空的。
那为什么还要有这2个属性，关键在于他们是 可读写的.下面几个属性都是 只读的.
offsetWidth : dom元素的实际宽度,但是没有显示的部分（需要滚动条滚动后显示的部分)
如果元素的display不为“none”的话，使用这个属性就行
offsetHeight: dom元素的实际高度,包含没有显示的部分（需要滚动条滚动后显示的部分)
如果元素的display不为“none”的话，使用这个属性就行
scorllWidth : dom元素的全部宽度，包含没有显示的部分
scrolltHeight : dom元素的高度
IE9下是只表示 显示的高度+上下2个滚动条的高度
chrome 下表是 实际内部的高度。
clientHeight: 可视区域高度
：如果元素的 display为不可见话的.可以先把该元素的 设置为可见，然后通过使用该属性获取 高度
最后再将元素设置为原来的属性即可。
clientWidth : 可视区域宽度
top : 距离上级元素的x距离
left ：距离上级元素的y距离
如果要元素实际的top 必须要通过offsetTop来计算,left也是同样要通过offsetLeft来计算
最经典的计算位置代码 (Top)同这个一样
function getLeft(elem){
return elem.offsetParent?
elem.offsetLeft+getLeft(elem.offsetParent):
elem.offsetLeft;
}
下图是网上找到IE6下的各个属性的代表。FF和chrome有可能不同。
width height top left
TAG:
