javascript获取坐标/滚动/宽高/距离
2024-09-01 12:02:31
坐标（鼠标/触摸）
event.screenX 鼠标/触摸，相对于显示屏的X坐标
event.screenY 鼠标/触摸，相对于显示屏的Y坐标
event.clientX 鼠标/触摸，相对于浏览器视口的X坐标
event.clientY 鼠标/触摸，相对于浏览器视口的Y坐标
event.pageX 鼠标/触摸，相对于文档的X坐标(ie不支持)
event.pageY 鼠标/触摸，相对于文档的Y坐标(ie不支持)
event.offsetX 鼠标/触摸，相对于触发事件的X坐标(ie独有)
event.offsetY 鼠标/触摸，相对于触发事件的Y坐标(ie独有)
滚动（窗口/页面）
window.pageXOffset X轴滚动条，能向右滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）
window.pageYOffset Y轴滚动条，能向下滚动的距离（只读属性/IE需要9以上/PC和移动端都支持）
document.body.scrollLeft X轴滚动条，能向右滚动的距离（仅移动端支持）
document.body.scrollTop Y轴滚动条，能向下滚动的距离（仅移动端支持）
document.documentElement.scrollTop X轴滚动条，能向右滚动的距离（仅PC端支持）
document.documentElement.scrollLeft Y轴滚动条，能向下滚动的距离（仅PC端支持）
document.scrollingElement.scrollTop X轴滚动条，能向右滚动的距离（ie不支持）
document.scrollingElement.scrollLeft Y轴滚动条，能向下滚动的距离（ie不支持）
宽高（屏幕/游览器视口/页面）
screen.width 屏幕宽度
screen.height 屏幕高度
screen.availWidth 屏幕可用宽度
screen.availWidth 屏幕可用高度
window.outerWidth 游览器宽度
window.outerHeight 游览器高度
window.innerWidth 游览器视口宽度
window.innerHeight 游览器视口高度
document.body.offsetWidth 页面宽度
document.body.offsetHeight 页面高度
document.body.clientWidth 页面可显示宽度
document.body.clientHeight 页面可显示高度
宽高&距离（DOM）
offsetWidth 元素宽度（可视内容区 + 滚动条 + 内边距 + 边框）
offsetHeight 元素高度（可视内容区 + 滚动条 + 内边距 + 边框）
offsetLeft 与相邻父级的左距离
offsetTop 与相邻父级的上距离
clientWidth 元素宽度（可视内容区 + 内边距）
clientHeight 元素高度（可视内容区 + 内边距）
clientLeft 内边距边缘与边框边缘的距离（左边框）
clientTop 内边距边缘与边框边缘的距离（上边框）
scrollWidth 元素宽度（可视内容区 + 滚动内容区 + 内边距）
scrollHeight 元素高度（可视内容区 + 滚动内容区 + 内边距）
scrollLeft 隐藏的滚动距离（待滚动距离）
scrollTop 隐藏的滚动距离（待滚动距离）
宽高&位置（DOM）
getBoundingClientRect() 返回元素的宽高与坐标集合
> 宽高 = 可视内容区 + 内边距 + 边框
> 坐标
left = 位移 + 外边距
right = 位移 + 完整盒子模型所占宽度
top = 同left
bottom = 同right
getClientRects() 返回元素的数个矩形区域的类数组对象（集合）
> 用于块级元素，则集合[n]和getBoundingClientRect返回相同
> 用于内联元素，内联元素有多少行，该方法返回的对象有多少个成员
> 该方法，用于判断行内元素是否换行，以及行内元素的每一行的位置偏移
document.getClientRects(x, y) 返回当前文档上处于指定坐标位置最顶层的元素的最里层元素
> 最顶层，指z-index最大的元素
> 最里层，是指最里层面的子元素
> 该方法，用来检测元素是否发生重叠或是碰撞
临近父容器
offsetParent
获取与邻近父级的距离集合
function getElementPosition(e) {
var x = 0, y = 0;
while (e != null) {
x+=e.offsetLeft;
y+=e.offsetTop;
e=e.offsetParent;
}
return { x: x, y: y };
}
1.对于表格和内嵌框架布局的页面，由于不同浏览器实现这些元素的方式不同，得到的值并不精确
2.当文档中含有滚动条的时候，该方法就不能正常工作了
最新文章
- querySelector系列方法相比 getElementsBy 系列方法有什么区别？
- 用application实现一个网页的浏览计数器
- Google Code Jam 2015 R2 C
- Java-马士兵设计模式学习笔记-代理模式-动态代理 调用Proxy.newProxyInstance()
- js prototype新感悟
- 修改oracle用户密码永不过期
- Powerdesigner15 创建数据库生成脚本
- Blocks（POJ 3734 矩阵快速幂）
- 【机器学习】代价函数（cost function）
- with工作原理
- Url校验正则
- OpenGL.Tutorial15_Lightmaps
- Java学习笔记二：数据类型II
- jqeury-地区三级联动
- golang ---tcmalloc浅析
- 优化网站设计（十）：最小化JAVASCRIPT和CSS
- MVC防止跨站攻击@Html.AntiForgeryToken()
- VMware14 安装CentOS7及其配置;CentOS7配置网桥,做远程连接;
- java ftp上载下传 遇到的问题
- JSP 页面中用绝对路径显示图片