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

2.png

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 = 同left
                                                 bottom = 同right
getClientRects()                       返回元素的数个矩形区域的类数组对象(集合)
                                           > 用于块级元素,则集合[n]和getBoundingClientRect返回相同
                                           > 用于内联元素,内联元素有多少行,该方法返回的对象有多少个成员
                                           > 该方法,用于判断行内元素是否换行,以及行内元素的每一行的位置偏移
document.getClientRects(x, y)          返回当前文档上处于指定坐标位置最顶层的元素的最里层元素
                                           > 最顶层,指z-index最大的元素
                                           > 最里层,是指最里层面的子元素
                                           > 该方法,用来检测元素是否发生重叠或是碰撞
目录
相关文章
|
25天前
|
JSON JavaScript 前端开发
JavaScript原生代码处理JSON的一些高频次方法合集
JavaScript原生代码处理JSON的一些高频次方法合集
|
2月前
|
存储 JavaScript 前端开发
非常实用的JavaScript一行代码(整理总结)
非常实用的JavaScript一行代码(整理总结)
30 0
|
2月前
|
JavaScript 前端开发 测试技术
如何编写JavaScript模块化代码
如何编写JavaScript模块化代码
13 0
|
3天前
|
JavaScript 前端开发 开发工具
【JavaScript 与 TypeScript 技术专栏】TypeScript 如何提升 JavaScript 代码的可读性与可维护性
【4月更文挑战第30天】TypeScript 提升 JavaScript 代码的可读性和可维护性,主要通过静态类型系统、增强代码组织、智能提示与错误检测、文档化和在大型项目中的优势。静态类型减少误解,类和接口提供结构,智能提示提高编码效率,类型注解充当内置文档。在大型项目中,TypeScript 降低理解差异,平滑迁移现有 JavaScript 项目,助力提高开发效率和项目质量。
|
10天前
|
JavaScript 前端开发 算法
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
在开发中,采用简洁的语法和结构,遵循一致的命名规范,具有良好的代码组织和注释,能很好的提高代码的质量。可读性:易于阅读和理解。清晰的命名、简洁的语法和良好的代码结构可以使代码的意图更加明确,降低理解代码的难度,提高代码的可读性。可维护性:易于维护。当代码逻辑清晰、结构简洁时,开发者可以更快速地定位和修复bug,进行功能扩展或修改。同时,可读性高的代码也有助于后续的代码重构和优化。可扩展性:更具有扩展性和灵活性。清晰的代码结构和简洁的代码风格使得添加新功能、修改现有功能或扩展代码更加容易。
< JavaScript小技巧:如何优雅的用【一行代码 】实现Js中的常用功能 >
|
11天前
|
前端开发 JavaScript 容器
JavaScript、CSS像素动画特效代码
此示例创建一个带有像素粒子的容器,每隔300毫秒就会动态添加一个新的像素粒子,然后通过CSS的关键帧动画(`@keyframes`)使它们产生上升和逐渐消失的动画效果。你可以根据需要修改像素粒子的颜色、大小、动画效果和创建速度。
12 0
|
15天前
|
JavaScript 前端开发
JavaScript如何获得浏览器的宽高
JavaScript如何获得浏览器的宽高
|
17天前
|
JavaScript
js校验统一社会信用代码
js校验统一社会信用代码
19 0
|
20天前
|
监控 前端开发 JavaScript
如何在浏览器中使用javaScript进行代码调试
【4月更文挑战第11天】在浏览器中调试JavaScript是前端开发的关键技能。使用开发者工具(可通过F12、右键检查或菜单栏访问),遵循以下步骤:1) 打开Sources标签页查看所有脚本;2) 设置断点在需要暂停的代码行;3) 刷新页面触发断点;4) 利用调试工具如Scopes、Watch、Call Stack等检查代码状态;5) 使用Console辅助调试;6) 利用其他工具如Network、Performance和Memory进行性能分析。确保使用最新工具,保持代码清晰,以提升调试效率。
42 4
|
26天前
|
小程序 开发者
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?
微信小程序“Error: xxx.js 已被代码依赖分析忽略,无法被其他模块引用”报错?