这几个属性其实都好理解，但是太多了很容易忘记又记混了。所以从MDN里面摘抄一下。保证记住。(X,Y同理，我只写一个)
目录
5.Element.getBoundingClientRect()
1.MouseEvent.pageX
var pageX = event.pageX;
pageX 是一个由MouseEvent接口返回的相对于整个文档的x（水平）坐标以像素为单位的只读属性。
这个属性将基于文档的边缘，考虑任何页面的水平方向上的滚动。举个例子，如果页面向右滚动 200px 并出现了滚动条，这部分在窗口之外，然后鼠标点击距离窗口左边 100px 的位置，pageX 所返回的值将是 300。MouseEvent.pageX - Web API 接口参考 | MDN
2.MouseEvent.offsetX
MouseEvent 接口的只读属性 offsetX 规定了事件对象与目标节点的内填充边（padding edge）在 X 轴方向上的偏移量。
var xOffset = instanceOfMouseEvent.offsetX;
MouseEvent.offsetX - Web API 接口参考 | MDN
3.MouseEvent.clientX
MouseEvent.clientX 是只读属性， 它提供事件发生时的应用客户端区域的水平坐标 (与页面坐标不同)。例如，不论页面是否有水平滚动，当你点击客户端区域的左上角时，鼠标事件的 clientX 值都将为 0 。最初这个属性被定义为长整型（long integer），如今 CSSOM 视图模块将其重新定义为双精度浮点数（double float）。你可以查阅浏览器兼容性部分的文档来进一步了解有关信息。
var x = instanceOfMouseEvent.clientXMouseEvent.clientX - Web API 接口参考 | MDN
4.HTMLElement.offsetLeft
(我理解的是相对于有定位的父、祖先元素的左边距离，如果父级或者祖先级都没有定位那就是相对于body的左边距离。offsetTop同理)，
HTMLElement.offsetLeft 是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。
对块级元素来说，offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框。
然而，对于可被截断到下一行的行内元素（如 span），offsetTop 和 offsetLeft 描述的是第一个边界框的位置（使用 Element.getClientRects() 来获取其宽度和高度），而 offsetWidth 和 offsetHeight 描述的是边界框的尺寸（使用 Element.getBoundingClientRect 来获取其位置）。因此，使用 offsetLeft、offsetTop、offsetWidth、offsetHeight 来对应 left、top、width 和 height 的一个盒子将不会是文本容器 span 的盒子边界。
left = element.offsetLeft;
HTMLElement.offsetLeft - Web API 接口参考 | MDN
5.Element.getBoundingClientRect()
Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。如果box-sizing: border-box，元素的的尺寸等于 width/height。
rectObject = object.getBoundingClientRect();
返回值是一个 DOMRect 对象，这个对象是由该元素的 getClientRects() 方法返回的一组矩形的集合，就是该元素的 CSS 边框大小。返回的结果是包含完整元素的最小矩形，并且拥有left, top, right, bottom, x, y, width, 和 height这几个以像素为单位的只读属性用于描述整个边框。除了width 和 height 以外的属性是相对于视图窗口的左上角来计算的。
Element.getBoundingClientRect() - Web API 接口参考 | MDN
6.Element.clientWidth
内联元素以及没有 CSS 样式的元素的 clientWidth 属性值为 0。Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条（如果有的话）。
当在根元素(<html>元素)上使用clientWidth时(或者在<body>上，如果文档是在quirks(怪异)模式下)，将返回viewport的宽度(不包括任何滚动条). This is a special case of clientWidth.
该属性值会被四舍五入为一个整数。如果你需要一个小数值，可使用 element.getBoundingClientRect()。
var intElemClientWidth = element.clientWidth;
intElemClientWidth 是一个整数，表示元素的 clientWidth。clientWidth 是一个只读属性。
7.Element.scrollTop
Element.scrollTop 属性可以获取或设置一个元素的内容垂直滚动的像素数。
一个元素的 scrollTop 值是这个元素的内容顶部（卷起来的）到它的视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的 scrollTop 值为0。
// 获得滚动的像素数 var intElemScrollTop = someElement.scrollTop;
运行此代码后， intElemScrollTop 是一个整数，即element的内容向上滚动的像素数。
// 设置滚动的距离 element.scrollTop = intValue;
Element.scrollTop - Web API 接口参考 | MDN
8.Window.scrollY
返回文档在垂直方向已滚动的像素值。
var y = window.scrollY;
y是文档从顶部开始滚动过的像素值。
9.Window.pageYOffset
只读属性pageYOffset是 scrollY 的别名。返回文档在垂直方向已滚动的像素值。
10.HTMLElement.offsetWidth
HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不同）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值。
var offsetWidth =element.offsetWidth;
intElemOffsetWidth is a variable storing an integer corresponding to the offsetWidth pixel value of the element. offsetWidth 是一个只读属性。
这个属性将会 round(四舍五入)为一个整数。如果你想要一个fractional(小数)值,请使用element.getBoundingClientRect().
5616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
