JavaScript -- 元素大小和位置
在 JavaScript 操作 DOM 的过程中我们可能需要经常获取一个元素的大小，在处理鼠标事件的时候可能需要知道当前鼠标的点击位置，所以我将我在开发过程中使用的一些相关属性记录下来。
1. 偏移量
如果我们想知道一个元素相对于其父元素的偏移量，可以用以下几个属性获取到我们想要的数值。
-
offsetHeight： 元素在垂直方向上占用的空间大小，包括元素内容的高度，内边距的高度以及边框的高度。 -
offsetWidth： 元素在水平方向上占用的空间大小，包括元素的宽度，内边距的宽度以及边框的宽度。 -
offsetLeft： 元素的左外边框到父元素的左内边框的距离。 -
offsetTop: 元素的上外边框到父元素的上内边框的距离。 -
offsetParent： 当前元素的父元素。
如果想计算出一个元素相对于整个页面的偏移量，那我们可以使用 offsetParent 协助完成，比如获取一个元素相对于页面的 offsetLeft。
function getLeft(element) {
var left = element.offsetLeft;
var current = element.offsetParent;
while(current !== null) {
left += current.offsetLeft;
current = current.offsetParent;
}
return left;
}
当然，如果想获取一个元素相对于整个页面的 offsetTop，也可以使用同样的方式。
2. 客户区大小
有的时候我们想要知道用户的浏览器到底有多宽，有多高，这就需要借助于 clientWidth 和 clientHeight 了。clientWidth 返回的是元素的内容宽度与内边距宽度相加之和，clientHeight 返回的是元素的的内容高度与内边距高度相加之和。
可见，相比于上面介绍的 offsetWidth 和 offsetHeight，clientHeight 和 clientWidth 省略了边框的宽度。所以其实我们可以通过这两种方式计算用户的浏览器视口大小。
function getViewPort() {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
};
}
当然，我们也可以使用另一种方式
function getViewPort() {
return {
width: document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
};
}
不过值得注意的是，这两种方法是存在差异的，当 html 元素没有充满整个浏览器视口的时候，使用偏移量的方法会返回 html 的实际高度和宽度，而 clientWidth 和 clientHeight 会返回当前浏览器的可见区域大小，所以说对于 html 未充满屏幕的时候，我们想达到计算浏览器视口大小的功能，也可以添加如下 CSS 代码。
html, body {
height: 100%;
}
3. 滚动大小
当实现瀑布流的时候可能会用到滚动属性，因为我们的数据不是一次性就加载完毕的，而是随着用户的滚动而动态的加载数据。下面是四个与滚动大小有关的属性。
-
scrollHeight: 如果在没有滚动条的情况下，该属性和clientHeight返回值相同，即内容的高度与内边距的高度之和，不包含边框高度。如果存在滚动条，该属性等于scrollTop+clientHeight -
scrollWidth: 计算方式和scrollHeight相同。 -
scrollTop： 被隐藏在内容区域上方的像素数，通过这个属性可以设置元素的滚动位置。说直白点这个属性的值就是元素的总高度 - 元素的内容宽度 - 元素的padding。 -
scrollLeft: 被隐藏在内容区域左方的像素数，通过这个属性可以设置元素的滚动位置。
不过值得注意的是, 如果我们想取得当前页面的滚动位置时，在 Opera, Chrome 都可以通过 document.body.scrollTop 来获取，但是这个方法在 Firefox 需要通过 document.documentElement.scrollTop 来获取。所以我们可以投机取巧的采用以下方法获取当前浏览器的滚动位置。
function getScrollTop() {
var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
return scrollTop;
}
4. 关于位置
-
clientX和clientY是相对于视口的位置。 -
pageX和pageY在没有滚动的情况下和clientX， clientY是相等的，如果包含滚动的话，pageX = clientX + scrollLeft,pageY = clientY + scrollTop。 -
screenX和screenY就不是相对于浏览器视口的位置了，而是相对于用户的整个计算机屏幕。
