理解clientX、clientY、offsetLeft、event.offsetTop、offsetWidth、offsetHeight、clientWidth、clientHeight、scrollTop、scrollHeight
2024-09-04 21:58:47
一、clientX和clientY
事件发生时，鼠标距离浏览器的可视区域的X、Y轴的位置，不包含滚动条的区域的部分。就算是页面进行了滚动，鼠标的坐标值还是参考可视区域的。
二、offsetLeft和offsetTop
事件源元素相对于父节点的偏移的像素值。
三、offsetWidth和offsetHeight
获取的是元素的宽度，包含border，padding，内容宽度，以及滚动条的宽度，和element.getBoundingClientRect()的值是一致的。
四、clientWidth和clientHeight
获取的是元素实际的内容宽度，不包含border，padding，内容宽度，以及滚动条的宽度。
五、scrollTop和scrollHeight
scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数
scrollHeight是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容
scrollHeight = scrollTop + clientHeight
最新文章
- 关于u盘启动,关于UEFI,关于hp手提计算机
- java异常处理机制
- 文件上传小技巧/后端处理【以php示例】
- CC254x(cc2540/cc2541)的微信AirSync调试笔记
- HttpUrlConnection java.net.SocketException: Software caused connection abort: recv failed
- 23个移动app界面上的旋钮和刻度盘设计示例
- DIV焦点事件
- 安装 macbook 双系统( OS X 和 Ubuntu )
- arm-linux-gcc 安装和测试
- sql server 2000 对应 sql server 2005的row_number()、rank()、DENSE_RANK( )、ntile( )等用法
- background-clip与background-origin两者的区别
- 被DDOS攻击的解决方法
- JS和JQuery中的事件托付 学习笔记
- JavaScript获取屏幕和页面的宽度和高度
- 2018年秋季学期《c语言程序设计》学习总结
- 关于nginx安装的收藏
- Python+Selenium 自动化实现实例-处理分页（pagination）
- RabbitMQ入门-队列
- linux安装rabbitmq3.6.5
- SQL Server 创建索引（index）