clientWidth offsetWidth clientWidth
<textarea id="textarea">
offsetWidth=document.getElementById('textarea').offsetWidth;
clientWidth=document.getElementById('textarea').clientWidth;
scrollWidth=document.getElementById('textarea').scrollWidth;
clientWidth==scrollWidth
scrollbar是div的滚动条，浏览器的滚动条对此无影响
如果textarea设置了属性overlfow-y:scroll则scrollbar=17如果没有滚动条则scrollbar=0
| chrome | ff | IE | |
| offsetWidth |
width+padding+border textarea对象宽 |
width+padding+border textarea对象宽 |
width+padding+border textarea对象宽 |
| clientWidth |
width+padding-(scrollbar) textarea对象宽，不包括边框和滚动条 |
width-(scrollbar) textarea对象宽，不包括边框、滚动条和内边距 |
width+padding-(scrollbar) textarea对象宽，不包括边框和滚动条 |
| scrollWidth |
width+padding-(scrollbar) textarea对象宽，不包括边框和滚动条 |
width-(scrollbar) textarea对象宽，不包括边框、滚动条和内边距 |
width+padding-(scrollbar) textarea对象宽，不包括边框和滚动条 |
<div id='div'>
div被卷去的高： document.getElementById('div').scrollTop
div被卷去的左： document.getElementById('div').scrollLeft
offsetWidth=document.getElementById('div').offsetWidth;
clientWidth=document.getElementById('div').clientWidth;
clientWidth==scrollWidth
scrollbar是div的滚动条，浏览器的滚动条对此无影响
如果div设置了属性overlfow-y:scroll则scrollbar=17如果没有滚动条则scrollbar=0
| chrome | ff | IE | |
| offsetWidth |
width+padding+border div对象宽 |
width+padding+border div对象宽 |
width+padding+border div对象宽 |
| clientWidth |
width+padding-(scrollbar) div对象宽，不包括边框和滚动条 |
width+padding-(scrollbar) div对象宽，不包括边框和滚动条 |
width+padding-(scrollbar) div对象宽，不包括边框和滚动条 |
| scrollWidth |
width+padding-(scrollbar) div对象宽，不包括边框和滚动条 |
width+padding-(scrollbar) div对象宽，不包括边框和滚动条 |
width+padding-(scrollbar) div对象宽，不包括边框和滚动条 |
<body style="padding:5px;border:1px solid #ccc">
clientWidth=document.body.clientWidth;
offsetWidth=document.body.offsetWidth;
scrollWidth=document.body.scrollWidth;
scrollbar是浏览器的滚动条
如果浏览器右边有滚动条则scrollbar=17，如果浏览器右边没有滚动条则scrollbar=0
如果body指定了宽度
绿色border是不包含边框
| chrome | ff | IE | |
| document.body.offsetWidth |
width+padding+border-(scrollbar) body对象宽，包括边框 |
width+padding+border-(scrollbar) body对象宽，包括边框 |
width+padding+border-(scrollbar) body对象宽，包括边框 |
| document.body.clientWidth |
width+padding-(border)-(scrollbar) body对象宽，不包括边框 |
width+padding-(border)-(scrollbar) body对象宽，不包括边框 |
width+padding-(border)-(scrollbar) body对象宽，不包括边框 |
| document.body.scrollWidth |
width+padding+border+margin-(scrollbar) 网页全文宽 |
width+padding-(border)-(scrollbar) body对象宽，不包括边框 |
width+padding-(border)-(scrollbar) body对象宽，不包括边框 |
| document.documentElement.scrollWidth |
width+padding+border+margin-(scrollbar) 网页全文宽 |
width+padding+border+margin-(scrollbar) 网页全文宽 |
width+padding+border+margin-(scrollbar) 网页全文宽 |
如果内容宽度超过body宽度:
chrome：scrollWidth=内容宽+内容padding++内容border+内容左margin+body左padding+body左border+body左margin
ff： scrollWdith=内容宽+内容padding++内容border+内容左margin+body左padding
IE： scrollWidth=内容宽+内容padding++内容border+内容左margin+body左padding
ff/IE: document.documentElement.scrollWidth=内容宽+内容padding++内容border+内容左margin+body左padding+body左border+body左margin
---------------------------------------------------------------------------------
document.body和document.documentElement与DTD是否声明有关系
标准模式
chrome:
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
document.documentElement.scrollTop 始终为0
document.documentElement.scrollLeft 始终为0
FF/IE:
网页被卷去的高：document.documentElement.scrollTop
网页被卷去的左：document.documentElement.scrollLeft
document.body.scrollTop 始终为0
document.body.scrollLeft 始终为0
混杂模式/怪异模式（DTD未声明等）
chrome：
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
document.documentElement.scrollTop 始终为0
document.documentElement.scrollLeft 始终为0
FF:
网页被卷去的高：document.body.scrollTop
网页被卷去的左：document.body.scrollLeft
document.documentElement.scrollTop 始终为0
document.documentElement.scrollLeft 始终为0
IE：
网页被卷去的高：document.body.scrollTop，document.documentElement.scrollTop
网页被卷去的左：document.body.scrollLeft，document.documentElement.scrollLeft
-------------------------------------------------------------------------------------------
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
有错误麻烦指点一下
原文地址：http://www.cnblogs.com/miss-radish/p/3658871.html
