JavaScript中元素、文档、浏览器、屏幕的宽高

1. 元素的宽高

　　以宽为例

• 元素.style.width    样式的宽度，即写在元素的行内样式表的宽度。
  
• 元素.clientWidth    可视区宽，样式宽+padding
• 元素.offsetWidth    占位宽，样式宽+padding+border

2.文档、浏览器窗口的宽高

　　以高为例

window.innerHeight/innerWidth	浏览器内部高度，包括滚动条（如果有的话）。IE8及其一下不支持此方法
document.documentElement.clientHeight/clientWidth	文档可视区的高度，不包括滚动条（如果有的话）
document.documentElement.offsetHeight/offsetWidth	文档的占位高度，body的样式高+body的边框+body的padding+body的margin(相当于文档的padding)
document.body.clientHeight/clientWidth	body的可视区高，样式高+padding
document.body.offsetHeight/offsetWidth	body的占位高，样式高+padding+border
document.documentElement.scrollTop/scrollLeft（IE和FF支持）　 document.body.scrollTop/scrollLeft（chrome支持）	滚动条滚动的距离，到浏览器可视区顶部的距离
document.documentElement.scrollHeight/scrollWidth document.body.scrollHeight/scrollWidth	元素的实际高度（padding+样式高），两者在chrome里值相同，在FF和IE下前者比后者多了后者的margin值
元素.offsetLeft/offsetTop	元素到定位父级的距离，如果没有定位父级默认到文档（即html，浏览器边的距离）的距离

3.常用的计算窗口的尺寸和大小

　　可视区的尺寸　　document.documentElement.clientHeight/clientWidth

　　滚动距离（兼容写法）　　document.documentElement.scrollTop/scrollLeft || document.body.scrollTop/scrollLeft

　　内容尺寸　　document.body.scrollHeight/scrollWidth

　　文档尺寸　　document.documentElement.offsetHeight/offsetWidth