offsetLeft和clientX的区别是？

修远兮

offsetLeft和clientX的区别是？

julying

5 ]% t1 J% k# ?6 b

+ |! [  e) S' Q4 W5 t: Y这里如果有框架代码的话，可能会更直接一些，里面有些盒子的值都不知道是哪来的，只选自己看得懂的看吧。以下是对部分值的解释。

1. clientHeight :  都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。
5 _9 o( Q; o/ B) }7 `2. clientLeft,clientTop:这两个返回的是元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0.
- S/ [# \5 M  S0 i- {9 U& v6 j3. scrollHeight,scrollWidth:不管有多少对象在页面上可见,他们得到的是整体.
0 Q4 H" Q. P5 \, @4. scrollLeft,scrollTop:如果元素是可以滚动的,可以通过这俩个属性得到元素在水平和垂直方向上滚动了多远,单位是象素.
/ t6 G0 e: v) a4 A1 k. A6 K对于不可以滚动的元素,这些值总是0.

6 V: V3 d$ p1 J  A( D0 A5.event.clientX 相对文档的水平座标  event.clientY 相对文档的垂直座标

. r& ^: b4 r* Z0 P其它的相关：

4 d+ k0 p  o% f. L. }; e( ]! `; fscrollHeight: 获取对象的滚动高度（包括padding，不包括border ）。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
  j" C1 U0 l- ^/ U! N1 N+ Z0 EoffsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
+ p3 L# W1 O8 q; L, W
6 D* Q: s8 ?" U4 xdocument.documentElement.scrollTop 垂直方向滚动的值
6 c) @4 c) ]2 J: ~event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

: @+ K" u. C# }9 P: j*document.body.clientLeft这样的body的值需要特别对待，因为不同浏览器的定义有所不同。比如计算鼠标x轴在页面上的值可以用这个公式：var x = e.clientX + document.documentElement.scrollLeft – document.body.clientLeft ，Y轴的如此类推。

还找到一篇介绍不同浏览器区别的文章：

clientHeight
" U$ `5 h9 ~9 m0 M& i7 e' M& U大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

offsetHeight
' l' ?9 T/ e6 N6 _IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
* q% ?; J' t: K6 cNS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

9 N8 _- u& J3 R! E6 y* d, o简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
; {: C# Y5 e: e/ G& m2 ~NS、 FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。scrollHeight 则是网页内容实际高度。
6 A3 f. ]% r/ v  ^. n8 \- S8 r
6 X; V; p0 r$ l) J1 M, H同理
# q; }; b6 ?+ z. I% c+ dclientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

但是
FF 在不同的 DOCTYPE 中对 clientHeight 的解释不同， xhtml 1 trasitional 中则不是如上解释的。其它浏览器则不存在此问题。
标题：scrollTop、scrollLeft、scrollWidth、scrollHeight

pieces

clientX,   clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0,   clientY=0；
offsetX,   offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0,   offsetY=0；
1 F5 D6 y  q) OscreenX,   screenY是相对于用户显示器的位置
( u, I: j  ^, \x,y是鼠标当前相对于当前浏览器的位置clientX,   clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0,   clientY=0；
offsetX,   offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0,   offsetY=0；
screenX,   screenY是相对于用户显示器的位置
x,y是鼠标当前相对于当前浏览器的位置