本帖最后由 明教小编 于 2020-6-16 20:54 编辑
坐标(鼠标/触摸)- <div style="text-align: left;">event.screenX 鼠标/触摸,相对于显示屏的X坐标</div>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最大的元素
- > 最里层,是指最里层面的子元素
- > 该方法,用来检测元素是否发生重叠或是碰撞
复制代码
临近父容器
获取与邻近父级的距离集合
- 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.当文档中含有滚动条的时候,该方法就不能正常工作了
复制代码
|
|