实测：scrollLeft,scrollWidth,clientWidth,offsetWidth，screen.width全解析（转帖）

IE和FF通用部分：
有关document.documentElement和document.body.区别，请参考：http://hi.baidu.com/traindiy/blog/item/8d4bdaa27de4f0aacaefd070.html有助于理解以下内容。不过在实测中，可以理解为document.documentElement可以理解为浏览器的可见窗口区域，而body则仅为内容区域。

1、window.screen.width (.height) 显示器大小(IE和FF通用)： 1440 * 900 --> 和浏览器是否全屏无关

2、document.documentElement.clientHeight /clientWidth： 浏览器可视窗口大小(IE和FF通用)：该值不受样式表制约，只会随浏览器窗口大小变化。这和document.body.clientWidth 不一样。
3、document.body.clientHeight : 文档高度(IE和FF通用)：和上面一样，只是取值对象改为BODY，当BODY中无内容时，IE下为18，FF为0.当有内容时，则IE值=FF值，此值和BODY中的内容有关，是所有元素高度的总和
4、document.body.clientWidth : 文档宽度(IE和FF通用，FF会比IE取得值多2PX左右)：如IE 1440，FF：1442，此值和BODY中内容无关，但和样式有关，如在样式定义body{width:98px}，则此值为98，当浏览器大小改变时，如不是全屏，此值也会跟着变化。

3、document.documentElement.scrollLeft/scrollTop ：页面滚动后的左侧/顶端位置(IE和FF通用)。
4、document.documentElement.scrollHeight / scrollWidth : 获取对象的滚动高/宽度(IE和FF通用但有差别) IE/FF差别在于当body总高度小于浏览窗口可见区高度时，IE的scrollHeight值为body实际高度，而FF为浏览器可见区的高度。如果body高度大于浏览器可见区，则二者没什么差别。

5、document.documentElement.offsetHeight / offsetWidth : 获取对象相对于版面或由父坐标offsetParent 属性指定的父坐标的宽/高度.(和上面功能类似且IE/FF通用，但差别正好相反) offsetHeight是指浏览器可见区的高度，而offsetWidth是指浏览器宽度，差别在于当body总高度低于浏览窗口可见区高度时，IE的offsetHeight值仍为浏览器可见区的高度,而FF为body实际高度。如果body高度大于浏览器可见区，则二者没什么差别。
注、document.body.offsetHeight 和 document.body.offsetWidth :这对和上面不同，对象为body，在FF/IE下的值都是body的高和宽。不受浏览器可视区影响。
另外，当CSS有对BODY的宽做限制时，这时如果页面有一个div的宽超过这个值，则IE的document.body.clientWidth和offsetWidth等于那个DIV的宽，但FF则仍然保留CSS中对body宽界定的值。

并且要注意的是：如果没有在CSS中对body定义了 body{margin:0px;width:1239px}，而这时有一个div的值超过了屏幕大小，比如1600px;那么在IE 中，document.body.offsetWidth/clientWidth或用document.documentElement等等都可以取到 body实际宽值为那个DIV的宽度，而FF则不论用什么，body值都是浏览器可视区的大小，不会按那个div的宽来计算。
这时要用document.documentElement.scrollWidth（不能用body）来做为文本的宽度测量。而浏览器的可视宽度测量用document.documentElement.clientWidth。如下：

function BrowserAndIEwidth() {
var str2=''

bodyWidth = document.documentElement.scrollWidth //这里不能用document.body.
BrowserWidth = document.documentElement.clientWidth

str1 = ' BODY的实际宽度 = ' +bodyWidth+'，浏览器可视宽度 = '+BrowserWidth

if (bodyWidth>BrowserWidth){
str2 = 'body超过了浏览器的宽度！'
}

alert(str1+'\n'+str2);
}
//此函数在IE下当body内容未超范围时，并且用overflow="auto"设置过后，取值会不准。

或者分开取值更好：如下函数即为取得当前页面的高度：
function(){
if (window.innerHeight && window.scrollMaxY) { //FF
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ //IE
yScroll = document.body.scrollHeight;
} else {yScroll = document.body.offsetHeight;}
return yScroll;
}

6、offsetLeft:获取对象相对于版面或由offsetParent 属性指定的父坐标的计算左侧位置
7、offsetTop:获取对象相对于版面或由offsetTop 属性指定的父坐标的计算顶端位置

以下仅为IE或FF部分适用：

8、window.pageXOffset/pageYOffset: 页面滚动后的顶端位置(仅FF适用，建议用document.documentElement.scrollLeft/scrollTop)。
9、window.innerWidth /innerHeight: 浏览器可视区的大小,即不含浏览器菜单、工具栏(仅FF适用，建议用document.documentElement.clientHeight)，改变浏览器大小，此值也会改变
10、event.offsetY / .offsetX :(仅IE适用)光标指针相对于发生事件的对象的左上角的位置，也就是把事件发生区的DIV或TABLE等元素左上角当做坐标的0，0开始计算。
11、event.clientX / .clientY :(仅IE适用)与offsetX不同，clientX是从body窗口左上角开始计算。
12、在IE下的 event.x 等于FF中的event.pageX
13、window.scrollMaxX /window.scrollMaxY ：最大可滚动的值。仅FF可用。

应用举例：

1、当body的宽度没有受CSS样式表限制时，如没有规定body{width:863px}：则
document.body.clientWidth = document.documentElement.scrollWidth
反之当有限制时，则IE的document.documentElement.scrollWidth仍然等于document.body.clientWidth，但FF则document.documentElement.scrollWidth=浏览器窗口可视区的大小，只有用document.body.scrollWidth才能相等。也可以看出两种浏览器对容器的定义不同。

非物理生命：http://hi.baidu.com/traindiy

/***************************************************************************************************************
附：参考本文所附的代码，查看document.getElementById("divid")的clientWidth等各项值
IE6.0、FF1.06+：
clientWidth = width + padding = 300+10×2 = 320
clientHeight = height + padding = 200+10×2 = 220
offsetWidth = width + padding + border = 300+10×2+10×2= 340
offsetHeight = height + padding + border = 200+10×2+10×2 = 240

IE5.0/5.5：
clientWidth = width - border = 300-10×2 = 280
clientHeight = height - border = 200-10×2 = 180
offsetWidth = width = 300
offsetHeight = height = 200

附1： event.clientX和event.X 区别：
event.clientX返回事件发生时,mouse相对于客户窗口的X坐标
event.X也一样
但是如果设置事件对象的定位属性值为relative
event.clientX不变
而event.X返回事件对象的相对于本体的坐标
附2：
CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关
***************************************************************************************************************/

附一段测试代码：相关文档参：http://hi.baidu.com/traindiy/blog/item/ebd62234be12883c5ab5f5e9.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312">
<head>
<title> 代码实例：关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较 </title>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta name="author" content="枫岩,CnLei.y.l@gmail.com">
<meta name="copyright" content="http://www.cnlei.com" />
<meta name="description" content="关于clientWidth、offsetWidth、clientHeight、offsetHeight的测试比较" />
<style type="text/css" media="all">
body {font-size:14px;}
a,a:visited {color:#00f;}
#Div_CnLei { width:300px; height:200px; padding:10px; border:10px solid #ccc; background:#eee; font-size:12px; }
#Div_CnLei p {margin:0;padding:10px;background:#fff;}
</style>
<script type="text/javascript">
function Obj(s){
return document.getElementById(s)?document.getElementById(s):s;
}

function GetClientWidth(o){
return Obj(o).clientWidth;
}

function GetClientHeight(o){
return Obj(o).clientHeight;
}

function GetOffsetWidth(o){
return Obj(o).offsetWidth;
}

function GetOffsetHeight(o){
return Obj(o).offsetHeight;
}
</script>
</head>
<body>
<p>点击下面的链接:(div 宽300px，高200px，PADDING 10px，BORDER 10px)</p>
<div id="Div_CnLei">
<p>
<a href="javascript:alert(GetClientWidth('Div_CnLei'));">GetClientWidth();</a>
<a href="javascript:alert(GetClientHeight('Div_CnLei'));">GetClientHeight();</a>
</p>
<p>
<a href="javascript:alert(GetOffsetWidth('Div_CnLei'));">GetOffsetWidth();</a>
<a href="javascript:alert(GetOffsetHeight('Div_CnLei'));">GetOffsetHeight();</a>
</p>
</div>
<div id="Description">
<p><strong>IE6.0、FF1.06+：</strong><br /> clientWidth = width + padding = 300+10×2 = 320<br /> clientHeight = height + padding = 200+10×2 = 220<br /> offsetWidth = width + padding + border = 300+10×2+10×2= 340<br /> offsetHeight = height + padding + border = 200+10×2+10×2 = 240
</p>
<p><strong>IE5.0/5.5：</strong><br />clientWidth = width - border = 300-10×2 = 280<br />clientHeight = height - border = 200-10×2 = 180<br />offsetWidth = width = 300<br /> offsetHeight = height = 200
</p>
</div>
</body>
</html>