在最近的移动端学习中，常常要计算移动位置，之前一直不太明白这些都表示什么意思。所以今天特地来总结，以备不时之需。这些是目前日常用的，还有没写的边用边补充。
元素位置相关
-----------------------------------------------------------------------------------------------------------------------------------------
1. style.width 返回的是字符串，如28px，offsetWidth返回的是数值28。
2. style.width/style.height与scrollWidth/scrollHeight是可读写的属性，clientWidth/clientHeight与offsetWidth/offsetHeight是只读属性。
3. style.width的值需要事先定义，否则取到的值为空。而且必须要定义在html里(内联样式)，如果定义在css里，style.height的值仍然为空，但元素偏移有效；而offsetWidth则仍能取到。
鼠标事件相关
-----------------------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html>
<html lang="ch">
<head>
<meta charset="UTF-8">
<title>页面位置相关</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
width: 2000px;
height: 1000px;
}
#app{
height: 300px;
width: 300px;
background: pink;
border: 10px solid #000;
padding: 100px;
position: relative;
margin: 50px auto;
}
#wraper{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
height: 150px;
width: 150px;
padding: 50px;
background: green;
border: 10px solid #000;
}
</style>
</head>
<body>
<div id="app">
<div id="wraper"></div>
</div>
</body>
<script>
(function(){
//获取相关元素
var appNode = document.getElementById(‘app‘);
var wraperNode = document.getElementById(‘wraper‘);
console.log(wraperNode.offsetWidth,wraperNode.offsetHeight); //此时页面返回宽/高度：270px,是border-box的宽/高度；
console.log(wraperNode.clientWidth,wraperNode.clientHeight); //此时页面返回宽/高度：250px,是padding-box的宽/高度；
console.log(wraperNode.scrollWidth,wraperNode.scrollHeight );
console.log(wraperNode.offsetTop,wraperNode.offsetLeft); //上层父元素有定位，返回：115px；上层父元素无定位：参照视口
/*****************************************************/
document.addEventListener(‘click‘,function(){
console.log(event.clientX,event.clientY); //鼠标指针相对于浏览器可视区域X轴和Y轴的坐标;
console.log(event.pageX,event.pageY); //鼠标指针相对于浏览器可视区域X轴和Y轴的坐标（会随着滚动条的滚动而发生变化）;
console.log(event.screenX,event.screenY); //鼠标指针相对于整个显示器左上角X轴和Y轴的坐标位置，会随着浏览器的变化导致鼠标指针的位置发生变化（例如：浏览器的缩放等）;
});
})();
</script>
</html>
javascript中的位置相关 offsetwidth,offsetheight等
原文：https://www.cnblogs.com/Zh-J/p/11182732.html