JS中各种尺寸的获取
页面上的尺寸获取
- clientWidth/clientHeight——视口大小：可见区域的宽度或高度，不包括border、水平滚动条、margin的元素的宽度或高度，只包括元素的内容区域和padding值。
- offsetWidth/offsetHeight——视觉大小：看得见的大小，不包括margin的元素的宽度或高度，只包括padding、border、水平滚动条的宽度或高度。
- offsetTop/offsetLeft——当前元素的偏移量：当父级有定位，根据父级的偏移量，父级没有定位则是根据页面的偏移量。表示相对父级顶部或者左边的距离。
- scrollWidth/scrollHeight——当产生滚动条时，元素里边全文内容的宽度或高度，包含溢出的文本的尺寸，也就是包含可滚动的距离(scrollTop/scrollLeft)。
- scrollTop/scrollLeft——滚动的距离到顶部或左边的位置。(可设置)
//例如通过设置js中的scrollTop值实现点击按钮回到顶部功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
input{width: 60px;height: 60px;position: fixed;right: 20px;bottom: 50px;}
</style>
</head>
<body style="height : 2000px">
<input type="button" value="回顶部" id="btn">
</body>
<script>
var btn = document.getElementById("btn");
btn.onclick = function(){
document.documentElement.scrollTop = 0;
}
</script>
</html>
注意：
当页面已经设置好宽高，而其子元素的高度时页面产生了滚动条。当把滚动条滑到最下边时，在滚动的过程中页面中上边的内容有部分被隐藏了，那么当前不可见部分的页面内容高度就是scrollHeight。当前可见的区域就是clientHeight 。那么此时，scrollHeight>clientHeight恒成立 ，O在没有滚动条时scrollHeight==clientHeight恒成立 。所以得出结论，scrollHeight>=clientHeight恒成立 。
鼠标中的尺寸获取
- screenX/screenY——表示事件发生时，鼠标相对于当前显示器的X/Y坐标
- clientX/clientY——表示事件发生时，鼠标相对于页面可视区域的X/Y坐标。
- pageX/pageY——表示事件发生时，鼠标相对于页面的X/Y坐标，其中已经把滚动条滚过的高或宽计算在内。
- offsetX/offsetY——表示事件发生时，鼠标相对于当前点击元素的X/Y坐标。有兼容，谷歌有，火狐没有。
**思考：**我们都知道clientX/clientY和pageX/pageY都是鼠标相对于页面的X/Y坐标。那么clientX/clientY与pageX/pageY的有怎样的关系 ？
- pageX >= clientX, pageY >= clientY
- pageX = clientX + ScrollLeft(滚动条滚过的水平距离)
- pageY = clientY + ScrollTop(滚动条滚过的垂直距离)
- 当没有产生滚动条时， pageX = clientX
//当没有产生滚动条时， pageX = clientX
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width: 200px;height: 200px;background: red}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
var obox = document.getElementById("box");
obox.onclick = function(eve){
var e = eve || window.event; //139 84
// 事件发生时，鼠标相对于页面的可视区域的坐标
console.log(e.clientX, e.clientY);
// 事件发生时，鼠标相对于页面的坐标
console.log(e.pageX, e.pageY); //139 84
}
</script>
</html>
//当产生滚动条时， pageX > clientX
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#box{width: 200px;height: 2000px;background: red}
</style>
</head>
<body>
<div id="box"></div>
</body>
<script>
var obox = document.getElementById("box");
obox.onclick = function(eve){
var e = eve || window.event;
// 事件发生时，鼠标相对于页面的可视区域的坐标
console.log(e.clientX, e.clientY); //177 925
// 事件发生时，鼠标相对于页面的坐标
console.log(e.pageX, e.pageY); //177 1959
}
</script>
</html>
**注意：**因为事件发生时，鼠标相对于当前元素的坐标，有兼容，谷歌有，火狐没有 ，也就是offsetX /offsetY 有兼容。那么可以得出以下公式：
- e.pageX - obox.offsetLeft === e.offsetX
- e.pageY - obox.offsetTop === e.offsetY
- 虽然说pageX >= clientX, pageY >= clientY，能不能用clientX/clientY替换pageX/pageY 呢，这是要区分有没有产生滚动条而言的， 但是上边两个式子恒成立，所以用上边式子最好。
