差别client、offset、scroll系列以及event的几个距离属性

element元素结点属性

一. offset系列

1.offsetWidth 和offsetHeight

element.offsetWidth是一个仅仅读属性，它包含了：

css width + padding+border+垂直滚动栏宽度

这里的滚动栏就是单纯滚动栏的意思，不包含不可见的部分哦。

而element.offsetHeight与之相似，仅仅是改为垂直方向而已。

在页面布局中要计算和考虑的盒子的宽度和高度通经常使用这个属性。

2.offsetParent

element.offsetParent是一个仅仅读属性，返回一个对象的引用，这个引用指向了element（调用offsetParent）的近期一个使用了定位（absolute、relative）的父元素，假设没有定位了的父元素，则指向根元素（标准模式下为 html。quirks 模式下为 body）。

兼容性：

在 Webkit 中，假设元素为隐藏的（该元素或其祖先元素的 style.display 为 “none”），或者该元素的 style.position 被设为 “fixed”。则该属性返回 null。

在 IE 9 中，假设该元素的 style.position 被设置为 “fixed”，则该属性返回 null。（display:none 无影响。

）

3.offsetTop和offsetLeft

element.offsetTop 和 element.offsetLeft 都是相对于offsetParent的内边距（外）边界的。

也就是返回对象元素边界的左上角顶点相对于offsetParent的左上角顶点的水平偏移量。这里。元素对象左上角顶点是要从border開始算（假设有的话。即border边界距离offsetParent padding边界的距离，不是从从元素的margin開始算），offsetParent的左上角是指其padding边界。

在元素定位中通常使用这个属性来获取定位元素的top和left样式值。

參考资料：

前端攻城狮学习笔记九：让你彻底弄清offset

HTMLElement.offsetParent

二. client系列

1.clientHeight和clientWidth

element.clientHeight表示元素可视区域的高度。包含可视区域中元素的

CSS height+padding

不包含边框、滚动栏、不可见部分、margin。

clientWidth相似。仅仅只是是水平方向。

比如document.documentElement.clientWidth是整个文档的可视区宽度。

2.clientLeft和clientTop

是元素

padding外边界与父元素的padding边界的距离-元素的offsetLeft值，就等于元素的左边框宽度。？？？不知道理解对没

clientTop与之相似。

三. scroll系列

1.scrollHeight和scrollWidth

element.scrollHeight属性是仅仅读的，它包含：

可见CSS高度+padding+border+因为overflow设置为隐藏或者scroll而不可见的内容高度。

可看出和offsetHeight的差别就是多了个不可见内容区高度。scrollWidth与之相似。

2.scrollTop和scrollLeft

即是被scroll了的内容区域的高度和宽度。隐藏不可见的内容区域。

注意：

元素设置了overflow: scroll，滚动栏是占领了元素原来CSS宽度的一部分。即加了滚动栏后，元素CSS中定义的属性width=滚动栏宽度+content 宽度。边框是加在滚动栏外面的，而padding则是加在滚动栏内部。内容区之外的。

一个盒子设置了margin-top。是和别的盒子间的垂直距离，这个别的盒子不包含父盒子，也就是说，内部盒子顶部和父盒子边界的距离不变，而是整个父盒子顶部都和更外部的环境相距了margin-top值的距离。

參考资料：

Mozilla文档上的图示描写叙述得非常明确

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollHeight

event事件对象属性

以下几个是event事件对象的属性，可获取鼠标的位置：

1.clientX。clientY

表示鼠标位置距离可视窗体边缘的距离。它们是事件对象的属性。这2个属性不是标准属性，但得到了广泛支持。

IE事件中没有这2个属性。

2. pageX，pageY

表示鼠标位置距离整个文档页面边缘（左和上边缘）的距离

3.screenX，screenY

表示鼠标位置距离屏幕边缘的距离

4.offsetX，offsetY：

鼠标相对于事件源元素（srcElement）的X,Y坐标，仅仅有IE事件有这2个属性，标准事件没有相应的属性。

来看个小样例。尾随鼠标的提示框：

//css
#info {position:absolute;}
//html
<div id="info"></div>
//js
document.onmousemove=function(ev){
   var oEvent=ev||event;
   var info=document.getElementById('info');
   //获取不可见内容高度
   var scrollTop=document.documentElement.scrollTop||
   document.body.scrollTop//?
??混杂模式和标准模式下都能工作？
   info.style.left=oEvent.clientX+'px';
   info.style.top=oEvent.clientY+scrollTop+'px';  //可视区高度+scrolled的高度
}

document.documentElement指向document对象的根元素，在html文档中就是html元素。

经验：仅仅要在用到clientX和clientY的地方都最好加上scroll值。