1.clientX，pageX，offsetX与screenX
先统一了解下这四个概念，理解不透没关系，这些属性都是用于鼠标的。
clientX：在水平方向上，鼠标指针距离浏览器左侧边缘的距离。
pageX：在水平方向上，鼠标指针距离网页文档X轴左侧边缘的距离。
offsetX：在水平方向上，鼠标指针距离鼠标所在元素左侧边缘的距离。
screenX：在水平方向上，鼠标指针距离电脑屏幕左侧边缘的距离。
同理在Y轴方向同理。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>pageX-clientX-offsetX-screenX</title>
</head>
<style type="text/css">
html,body{
margin: 0;
padding: 0;
}
div{
height: 300px;
background: #f00;
600px;
text-align: center;
margin: 50px;
padding: 20px;
border: 10px dotted aqua ;
}
</style>
<body>
<div class='box'></div>
</body>
<script type="text/javascript">
window.onload = function(){
var box = document.querySelector('.box');
box.onmousemove = (e)=>{
box.innerHTML = `
pageX:${e.pageX} <br>
clientX:${e.clientX} <br>
offsetX:${e.offsetX} <br>
screenX:${e.screenX}
`
}
}
</script>
</html>
2.scrollLeft、offsetLeft、clientLeft
概念（这些属性主要是用户获取到的元素）
scrollLeft：a子元素的宽度比b父元素的宽度要宽时，且允许滚动条出现情况下，滚动条滚动过的距离，b.scrollLeft来获取，当是整个页面出现滚动条时，document.documentElement.scrollLeft来获取。
offsetLeft：当元素的父辈中没有存在position属性（除了static），含义就是该元素的margin与borde之间分界到网页文档左侧之间的距离；当某个元素的父辈中存在position属性（除了static），含义就是钙元素的的margin与borde之间分界到最近父辈元素border与padding之间分界之间的距离。
父辈中没有position属性（除了static）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>scrollLeft、offsetLeft、clientLeft、left</title> <style type="text/css"> html,body{ margin: 0;padding: 0; } .box1{ 800px; height: 400px; background: green; padding: 15px; margin: 20px; border: 10px dotted #333; } .box2{ 200px; height: 200px; background: yellow; padding: 15px; margin: 20px; border: 10px dotted #FF0000; } .box3{ 100px; height: 100px; background: red; padding: 15px; margin: 20px; border: 10px dotted #FFFF00; } </style> </head> <body> <div class="box1"> <div class="box2"> <div class="box3"></div> </div> </div> </body> <script> window.onload = function(){ var box1 = document.querySelectorAll('.box1')[0]; var box2 = document.querySelectorAll('.box2')[0]; var box3 = document.querySelectorAll('.box3')[0]; console.log(box1.offsetLeft) //20 box1的左侧margin console.log(box2.offsetLeft) //65 box1左侧margin(20)+box1左侧border(10)+box1左侧padding(15)+box2左侧margin(20)
console.log(box3.offsetLeft) //110 box1左侧margin(20)+box1左侧border(10)+box1左侧padding(15)+box2左侧margin(20)+box2左侧border(10)+box2左侧padding(15)+box3左侧margin(20)
}
</script> </html>
box3元素的父级box2和爷级box1中都设置position属性（除了static），定位嵌套规则一定要合理，相对定位(position)里一定嵌套的是决定定位（absolute）或者固定定位（fixed）。这是定位嵌套合理情况下
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>scrollLeft、offsetLeft、clientLeft、left</title> <style type="text/css"> html,body{ margin: 0;padding: 0; } .box1{ 800px; height: 400px; background: green; padding: 15px; margin: 20px; border: 10px dotted #333; position: relative; } .box2{ 200px; height: 200px; background: yellow; padding: 15px; margin: 20px; border: 10px dotted #FF0000; left:22px; position: absolute; } .box3{ position: absolute; left: 18px; 100px; height: 100px; background: red; padding: 15px; margin: 20px; border: 10px dotted #FFFF00; } .box4{ position: fixed ; left: 18px; 50px; height: 50px; background: #333333; padding: 15px; margin: 20px; border: 10px dotted #FFFF00; } </style> </head> <body> <div class="box1"> <div class="box2"> <div class="box3"> <div class="box4"></div> </div> </div> </div> </body> <script> window.onload = function(){ var box1 = document.querySelectorAll('.box1')[0]; var box2 = document.querySelectorAll('.box2')[0]; var box3 = document.querySelectorAll('.box3')[0]; var box4 = document.querySelectorAll('.box4')[0]; console.log(box1.offsetLeft) // 20 box1的margin(20) console.log(box2.offsetLeft) // 42 box2的left(22)+box2的margin(20) console.log(box3.offsetLeft) // 38 box3的left(18)+box3的margin(20) console.log(box4.offsetLeft) // 38 box4的left(18)+box4的margin(20) } </script> </html>
clientLeft: 就是border的宽度
styke.left: 就是采用定位时父级content左侧到该元素margin之间的距离
3.offsetLeft与style.left之间的差异。
1.获取offsetLeft属性的元素自身不用定位，但获取style.left的元素必须定位 2.offsetLeft是只读的，style.left是读写的 3.offsetLeft返回的是数字，不带单位，style.left 返回的是字符串，带单位 4.style.left 只能获取定义在html中的内部样式属性，而offsetLeft并没有这个限制
4. 为什么style.left取不到？
首先元素本身要进行定位，其次，其left属性为内部样式时才能获取。
<div style='left=20px'></div>
参考https://www.cnblogs.com/echolun/p/9231760.html