javascript 代码技巧 (四) —— javascript获取坐标/滚动/宽高/距离

1. 坐标（鼠标/触摸）

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独有)

2. 滚动（窗口/页面）

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不支持）

3. 宽高（屏幕/游览器视口/页面）

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             页面可显示高度

4. 宽高&位置（DOM）

getBoundingClientRect()                返回元素的宽高与坐标集合> 宽高 = 可视内容区 + 内边距 + 边框> 坐标left = 位移 + 外边距right = 位移 + 完整盒子模型所占宽度top = 同leftbottom = 同rightgetClientRects()                       返回元素的数个矩形区域的类数组对象（集合）> 用于块级元素，则集合[n]和getBoundingClientRect返回相同> 用于内联元素，内联元素有多少行，该方法返回的对象有多少个成员> 该方法，用于判断行内元素是否换行，以及行内元素的每一行的位置偏移document.getClientRects(x, y)          返回当前文档上处于指定坐标位置最顶层的元素的最里层元素> 最顶层，指z-index最大的元素> 最里层，是指最里层面的子元素> 该方法，用来检测元素是否发生重叠或是碰撞

1. 希望本文能对大家有所帮助，如有错误，敬请指出

2. 原创不易，还请各位客官动动发财的小手支持一波（关注、评论、点赞、收藏）

javascript 代码技巧 (四) —— javascript获取坐标/滚动/宽高/距离相关推荐

【JavaScript代码实现四】获取和设置 cookie
1 // 创建cookie 2 function setCookie(name, value, expires, path, domain, secure) { 3 var cookieText = ...
13 种 JavaScript 代码技巧
13 种 JavaScript 代码技巧 1. 多表达式多 if 判断我们可以在数组中存储多个值,并且可以使用数组include方法. // 长 if (x === 'abc' || x === ' ...
php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...
【若依(ruoyi)】获取mainContent的宽高
前言若依(ruoyi): v4.3 360极速浏览器 12.0.1550.0 (正式版本) (32 位) 操作系统 Windows 10 OS Version 2004 (Build 19041.5 ...
php 获取图片的宽高,JS怎么获取图片当前宽高
JS获取图片当前的宽高,我们可以使用JavaScript clientWidth和clientHeight属性来实现获取.clientWidth.clientHeight属性表示获取图像的当前宽度和高 ...
jquery获取设置元素宽高位置height()、width()、offset()、position()、scrollTop()、scrollLeft()
全栈工程师开发手册 (作者:栾鹏) jquery系列教程2-style样式操作全解 jquery获取设置元素宽高位置 jquery的通过height().width().offset().positi ...
android 获取屏幕的宽高
今天,讲讲android如何获取屏幕的宽高. // 通过WindowManager获取 DisplayMetrics dm = new DisplayMetrics(); getWindowManag ...
当View为GONE状态时获取View的宽高
首先要明白一点就是一般情况下,我们在Activity里面的onCreate里面获取View宽高,可以采用: (1)View布局完成的监听 button.getViewTreeObserver().ad ...
JS获取video真实宽高
JS获取video真实宽高 JS代码 var video = document.querySelector('video'); video.addEventListener('canplay', fu ...
android linearlayout 方法,Android基础之获取LinearLayout的宽高
前言看到题目获取LinearLayout宽高,或许大家想到的解决方法如下: public void onCreate(Bundle savedInstanceState) { super.onCre ...

javascript 代码技巧 (四) —— javascript获取坐标/滚动/宽高/距离

javascript 代码技巧 (四) —— javascript获取坐标/滚动/宽高/距离相关推荐

最新文章

热门文章