标签：test body scroll 获取元素 his 元素 code red col
1、screenX、pageX、clientX、offsetX
screenX: 鼠标指针距离屏幕左侧的距离，不随滚动条变化而变化
pageX: 鼠标指针距离文档左侧的距离，不随滚动条变化而变化
clientX: 鼠标指针距离可视窗口左侧的距离, 随滚动条变化而变化， 如果拖动滚动条让元素离可视窗口左侧越近值越小
offsetX: 鼠标指针距离当前元素左侧的距离
附上测试代码：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head> <body> <div id="testDiv" style="margin-left: 1200px;height: 1200px; width: 1200px;border: 1px solid red;"> </div> <script src="../jquery-1.9.1.min.js"></script> <script> var $div = $(‘#testDiv‘); $div.on("mousemove", function (e) { var pageX = e.pageX; var pageY = e.pageY; var clientX = e.clientX; var clientY = e.clientY; var offsetX = e.offsetX; var offsetY = e.offsetY; var html = ‘<p> pageX:‘ + pageX + ‘,pageY:‘ + pageY + ‘,clientX:‘ + clientX + ‘,clientY:‘ + clientY + ‘,offsetX:‘ + offsetX + ‘,offsetY:‘ + offsetY + ‘</p>‘; $(this).html(html); } ); </script> </body> </html>
2. offsetWidth、scrollWidth、clientWidth
offsetWidth: 获取元素宽度，包含padding、border 不包含margin
clientWidth: 获取元素宽度，包含pdding，不包含 border、margin，是元素可见宽度不包含溢出部分不可见的宽度
scrollWidth: 只读，获取元素宽度，包含pdding，不包含 border、margin， 也包含溢出不可见的部分的宽度
3.srcollTop、clientTop
scrollTop: 元素滚动后距离容器顶部的距离
clientTop: 获取border的宽度
ele.srcollHeight - ele.scrollTop === ele.clientHeight 来判断元素是否滚动到底
4. offsetLeft、style.left
offsetLeft: 元素自身不用定位（即默认定位），距离元素最近且非static的父元素的左偏移量，如果向上一直未找到就相对于body的左偏移量
style.left: 元素自身非static定位
（screenX、pageX、clientX、offsetX）（offsetWidth、scrollWidth、clientWidth） （srcollTop、clientTop） 区别
标签：test body scroll 获取元素 his 元素 code red col
原文地址：https://www.cnblogs.com/fat-girl/p/14303720.html
