1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > javascript 代码技巧 (四) —— javascript获取坐标/滚动/宽高/距离

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

时间:2024-05-26 07:56:04

相关推荐

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.scrollLeftX轴滚动条,能向右滚动的距离(仅移动端支持)document.body.scrollTopY轴滚动条,能向下滚动的距离(仅移动端支持)document.documentElement.scrollTopX轴滚动条,能向右滚动的距离(仅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. 原创不易,还请各位客官动动发财的小手支持一波(关注、评论、点赞、收藏)

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。