DOM元素位置，滚动位置和鼠标事件位置相关属性函数总结

最新推荐文章于 2022-08-25 08:39:49 发布
最新推荐文章于 2022-08-25 08:39:49 发布
阅读量185 收藏 1
点赞数
原文链接：https://segmentfault.com/a/1190000011965540
版权

前言：前段时间经常被这些参数搞混，在此总结一下，画了一张图，希望能对大家有所帮助

getBoundingClientRect相关

  • left 元素的左边 距离 可视窗口左边的距离
  • right 元素的右边 距离 可视窗口左边的距离
  • top 元素的上边 距离 可视窗口顶部的距离
  • bottom 元素的下边 距离 可视窗口顶部的距离
  • width 元素的宽
  • height 元素的高
  • x/y 目前来看与let/top相同

图片描述

鼠标相关事件位置属性

  • screenX/screenY 鼠标点击位置距离屏幕左上角的位置
  • clientX/clentY 鼠标点击位置距离可视窗口左上角的位置
  • pageX/pageY 鼠标点击位置距离文档左上角的位置
  • offsetX/offsetY 鼠标点击位置距离当前元素的边框内的位置
  • layerX/layerY 鼠标点击位置 距离 当前元素的距离最近的非static的元素的位置

注：此图来自网上
图片描述

滚动相关

  • scrollTop 元素垂直方向被卷去的像素的距离
  • scrollLeft 元素水平方向被卷去的像素的距离
  • window.scrollX(window.pageXOffset) 文档/页面水平方向滚动的像素值
  • window.scrollY(window.pageYOffset) 文档/页面垂直方向滚动的像素值
  • scrollTo(xpos, ypos) 将内容滚动到指定的坐标
  • scrollBy(xnum, ynum) 将内容向右下滚动的像素数

元素大小相关

  • offsetWidth=border+padding+width
  • offsetHeight=border+padding+height
  • clientWidth=padding+width-滚动条宽度
  • clientHeight=padding+height-滚动条宽度
  • scrollWidth=padding+包含内容的完全宽度
  • scrollHeight=padding+包含内容的完全高度

示例图
图片描述

weixin_34238642
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
事件类型2（DOM事件绑定、以及滚轮事件）
qq_52908359的博客
05-25 394
1.UI事件（不一定与用户操作有关的事件） （1）.load当页面完全加载后在window上触发，图片也可以触发load事件； （2）.resize当窗口大小变化时window上触发（除火狐外其他浏览器窗口变化1像素时就触发事件，而火狐是在用户停止调整窗口大小时才会触发。不建议在此时中加入大计算量代码。因为可能频繁执行，导致浏览器速度便面。另外窗口最大最小也会触发事件） （3）.scroll当用户滚动带滚动条元素中的内容时，在该元素上面触发 ...
JavaScript权威指南（第6版）
09-20
15.8 文档和元素的几何形状和滚动 15.9 HTML表单 15.10 其他文档特性 第16章 脚本化CSS 16.1 CSS概览 16.2 重要的CSS属性 16.3 脚本化内联样式 16.4 查询计算出的样式 16.5 脚本化CSS类 16.6 脚本化样式表 第17章 ...
javascript函数的解释
02-26
javascript函数的解释，解释了具体函数的功能，一、函数JavaScript函数集合 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转大写的JS: document.getElementById("output").value = document.getElementById("input").value.toUpperCase(); 7.JS中的值类型:String,Number,Boolean,Null,Object,Function 8.JS中的字符型转换成数值型:parseInt(),parseFloat() 9.JS中的数字转换成字符型:(""+变量) 10.JS中的取字符串长度是:(length) 11.JS中的字符与字符相连接使用+号. 12.JS中的比较操作符有:==等于,!=不等于,>,>=,<.<= 13.JS中声明变量使用:var来进行声明 14.JS中的判断语句结构:if(condition){}else{} 15.JS中的循环结构:for([initial expression];[condition];[upadte expression]) {inside loop} 16.循环中止的命令是:break 17.JS中的函数定义:function functionName([parameter],...){statement[s]} 18.当文件中出现多个form表单时.可以用document.forms[0],document.forms[1]来代替. 19.窗口:打开窗口window.open(), 关闭一个窗口:window.close(), 窗口本身:self 20.状态栏的设置:window.status="字符"; 21.弹出提示信息:window.alert("字符"); 22.弹出确认框:window.confirm(); 23.弹出输入提示框:window.prompt(); 24.指定当前显示链接的位置:window.location.href="URL" 25.取出窗体中的所有表单的数量:document.forms.length 26.关闭文档的输出流:document.close(); 27.字符串追加连接符:+= 28.创建一个文档元素:document.createElement(),document.createTextNode() 29.得到元素的方法:document.getElementById() 30.设置表单中所有文本型的成员的值为空: var form = window.document.forms[0] for (var i = 0; i<form.elements.length;i++){ if (form.elements[i].type == "text"){ form.elements[i].value = ""; } } 31.复选按钮在JS中判断是否选中:document.forms[0].checkThis.checked (checked属性代表为是否选中返回TRUE或FALSE) 32.单选按钮组(单选按钮的名称必须相同):取单选按钮组的长度document.forms[0].groupName.length 33.单选按钮组判断是否被选中也是用checked. 34.下拉列表框的值:document.forms[0].selectName.options[n].value (n有时用下拉列表框名称加上.selectedIndex来确定被选中的值) 35.字符串的定义:var myString = new String("This is lightsword"); 36.字符串转成大写:string.toUpperCase(); 字符串转成小写:string.toLowerCase(); 37.返回字符串2在字符串1中出现的位置:String1.indexOf("String2")!=-1则说明没找到. 38.取字符串中指定位置的一个字符:StringA.charAt(9); 39.取出字符串中指定起点和终点的子字符串:stringA.substring(2,6); 40.数学函数:Mat
JavaScript详解(第2版)
04-25
第1章　JavaScript简介　1 1.1　JavaScript是什么　1 1.2　JavaScript不是什么　2 1.3　JavaScript的用处　3 1.4　JavaScript及其在Web页面中的位置　3 1.5　Ajax是什么　5 1.6　JavaScript是什么样子的　6 1.7　JavaScript及其在Web开发中承担的角色　7 1.8　JavaScript和事件　9 1.9　标准化JavaScript和W3C　11 1.9.1　JavaScript对象　12 1.9.2　文档对象模型　12 1.10　关于浏览器　13 1.10.1　JavaScript的版本　14 1.10.2　你的浏览器遵循标准吗　16 1.10.3　浏览器是否已启用JavaScript　16 1.11　JavaScript代码放在哪儿　17 1.12　验证标签　20 1.12.1　W3C验证工具　21 1.12.2　Validome验证工具　21 1.13　应知应会　22 练习　23 第2章　脚本的安装　24 2.1　HTML文档与JavaScript　24 2.2　语法细节　27 2.2.1　区分大小写问题　27 2.2.2　自由形式及保留字　27 2.2.3　语句及分号　28 2.2.4　注释　28 ... 2.2.5　〈script〉标签　 　　2.3　生成HTML　并输出显示　 　　2.3.1　字符串及字符串串联　 　　2.3.2　write()及writeln()方法　 　　2.4　关于调试　 　　2.5　调试工具　 　　2.5.1　Firefox　 　　2.5.2　在Internet　Explorer　8中调试　 　　2.5.3　[removed]URL　协议　 　　2.6　JavaScript与旧浏览器或受限的浏览器　 　　2.7　应知应会　 　　练习　 　　第3章　数据类型、字面量和变量　 　　3.1　数据类型　 　　3.1.1　基本数据类型　 　　3.1.2　复合数据类型　 　　3.2　变量　 　　3.2.1　有效变量名　 　　3.2.2　声明和初始化变量　 　　3.2.3　动态或宽松类型语言　 　　3.2.4　变量作用域　 　　3.2.5　变量的拼接　 　　3.3　常量　 　　3.4　要注意的bug　 　　3.5　应知应会　 　　练习　 　　第4章　对话框　 　　4.1　与用户交互　 　　4.1.1　alert()方法　 　　4.1.2　prompt()方法　 　　4.1.3　confirm()方法　 　　4.2　应知应会　 　　练习　 　　第5章　运算符　 　　5.1　JavaScript运算符和表达式　 　　5.1.1　赋值运算符　 　　5.1.2　优先级和结合性　 　　5.2　运算符类型　 　　5.2.1　算术运算符　 　　5.2.2　快捷赋值运算符　 　　5.2.3　递增运算符和递减运算符　 　　5.2.4　拼接运算符　 　　5.2.5　比较运算符　 　　5.2.6　逻辑运算符　 　　5.2.7　条件运算符　 　　5.2.8　位运算符　 　　5.3　数字、字符串还是布尔值？数据类型转换　 　　5.3.1　parseInt()函数　 　　5.3.2　parseFloat()函数　 　　5.3.3　eval()函数　 　　5.4　特殊运算符　 　　5.5　应知应会　 　　练习　 　　第6章　条件选择　 　　6.1　控制结构、块及复合语句　 　　6.2　条件　 　　6.2.1　if/else　 　　6.2.2　if/else　if　 　　6.2.3　switch　 　　6.3　循环　 　　6.3.1　while循环　 　　6.3.2　do/while循环　 　　6.3.3　for循环　 　　6.3.4　for/in循环　 　　6.3.5　使用break和continue控制循环　 　　6.3.6　嵌套循环及标签　 　　6.4　应知应会　 　　练习　 　　第7章　函数　 　　7.1　什么是函数　 　　7.1.1　函数声明和调用　 　　7.1.2　返回值　 　　7.1.3　匿名函数变量　 　　7.1.4　闭包　 　　7.1.5　递归　 　　7.1.6　函数是对象　 　　7.2　调试技巧　 　　7.2.1　函数语法　 　　7.2.2　使用try/catch和throw捕捉异常　 　　7.3　应知应会　 　　练习　 　　第8章　对象　 　　8.1　什么是对象　 　　8.1.1　对象及点语法　 　　8.1.2　使用构造函数创建对象　 　　8.1.3　对象的属性　 　　8.1.4　对象的方法　 　　8.2　类和用户自定义函数　 　　8.2.1　什么是类　 　　8.2.2　什么是this　 　
八、DOM（四） -- DOM事件2
weixin_45602227的博客
07-29 1617
一、滑轮滚动事件 +++ 绑定滚动事件(兼容谷歌、IE浏览器) elem.onmousewheel=function(){ } 绑定滚动事件 event.wheelDelta 只看正负，不看大小。向上滚>0 。向下滚<0 (通过该属性获取的是个数值,在不同的浏览器中获取的值是不同的。) +++ 绑定鼠标滚动事件(兼容火狐浏览器,火狐特有) elem.addE
【Vue】ES6，Array.find()和findIndex()函数的用法
热门推荐
Mr_EvanChen的Blog
11-19 1万+
ES6为Array增加了find()，findIndex函数。 find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。 findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。 他们的都是一个查找回调函数。 [1, 2, 3, 4].find((value, index, arr) =&gt; { }) 查找函数有三个参数。...
C++学习笔记——常用函数积累
耶律大石的博客
09-13 2186
1、find函数 find函数用于查找数组中的某一个指定元素的位置。 比如：有一个数组[0, 0, 5, 4, 4]； 问：元素5的在什么位置，find函数 返回值 为 2； find （数组名 + 起始查找元素的位置， 数组名 + 结束查找的元素位置， 想要查找的元素） find() 函数本质上是一个模板函数，用于在指定范围内查找和目标元素值相等的第一个元素。 如下为 find() 函数的语法格式： InputIterator find (InputIterator first, InputItera
JS DOM编程笔记 - 滚动事件（十八）
小帅的编程笔记
11-03 2261
今天我们来学习如何在JavaScript中处理滚动事件，如何优化滚动事件的性能。 滚动事件简介 当我们滚动页面或者在某个元素上滚动时就会触发滚动事件，我们可以通过以下方式触发滚动事件 使用右侧滚动条 使用鼠标滚轮 点击锚点链接 调用JS函数 要监听滚动事件，使用addEventListener()方法，事件名称为scroll，代码如下： targetElement.addEventListener('scroll', (event) => { // 处理滚动事件 }); 或者给目标元素的on
（黑马程序员）JavaScript DOM和BOM第五天学习笔记之事件对象滚动事件和加载事件
LuShanGuoQiLin的博客
08-25 176
（黑马程序员）JavaScript DOM和BOM第五天学习笔记之事件对象滚动事件和加载事件
dom css样式 添加节点 滚动事件 鼠标事件
weixin_30553837的博客
03-30 133
prototype里面的if函数if(elem)那部分函数表示如果有值就替代 if() 也就是else那部分函数表示无值就赋值 封装Innertext() 等属性 以下是获取css样式值 火狐独有的滚动事件DOMMouseScroll onmousewheel不支持火狐浏览器 判断鼠标滚动方向 ...
Javascript中的DOM实现显示鼠标的空间位置
aoe41606的博客
07-28 105
为了显示鼠标相对于浏览器的位置（相对于屏幕和页面类似），我们能够利用click事件，获得关于鼠标单击的事件对象event。这个事件对象里的clientX和clientY包括了鼠标的位置信息，所以我突发奇想。那我可不能够通过DOM中的createElement创建一个标签元素用于在相应的鼠标位置显示当前的鼠标相对于浏览器的坐标呢？ 这里我先利用Element中的createEle...
jQuery详细教程
04-25
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件 四. jQuery实例 jQuery hide() 演示简单的 jQuery hide() 函数。 <script type="text/javascript" src="/jquery/jquery.js"></...
JavaScript获取元素的坐标位置的函数
im20166456的博客
06-17 5286
在这里插入代码片
DOM元素的距离属性
m0_46582836的博客
02-15 509
offsetTop //返回元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。 所谓`在这里插入代码片`的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。此属性是只读的。 1 offsetLeft //此属性和offsetTop的原理是一样的，只不过方位不同，这里就不多介绍了。 scrollLeft //此属性可以获取或者设置对象的最左边到对象在当前窗口显示的范围内的左边的距离，也
获取DOM元素尺寸及鼠标位置
qq_33325959的博客
11-21 626
clientX，clientY，获取鼠标在可视区域中的坐标（和页面长度无关）； screenX，screenY，获取鼠标相对于电脑屏幕左边和上边的坐标；
毕业设计+编程项目实战+报名管理信息系统-基于ASP.NET技术(含完整源代码+开题报告+设计文档)
最新发布
06-02
一．系统运行必备环境： 1．软件环境：windows XP、Access 2003及以上版本、Excel 2003及其以上版本和.net FrameWork。 2．硬件环境：CPU要求PIII800及其以上，内存64M以上。 3．用户名:mere 密码:mere（未删除本记录条件下有效） 二．培训管理信息系统需要完成功能主要有： 1．系统管理 包括登陆、退出功能。 2．学生管理 包括报名、调班、延班、插班、退费等功能。 (1)报名：学生填写入学培训协议，录入人员依照协议将学生信息记入报名表和班级学生名册。 (2)调班：按照报名日期找出学生报名信息核对身份，在原来所报班级名册删除学生名字，在调班班级名册添加学生名字。 (3)延班：基本同上，按照报名日期找出学生报名信息核对身份，在原来所报班级名册删除学生名字，将该学生记入延班学生名册，以便调入新班级。 (4)插班：为了照顾关系单位的学生，特设置了插班的功能，可以根据需要设定学生学号。 (5)退费：根据培训机构实际情况有退费的实际需求，设置了全部退费和部分退费功能。 ①全部退费 按照报名日期找出学生报名信息核对身份，并依照协议判断用户是
130_基于JAVA的OA办公系统的设计与实现-源码.zip
06-02
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
stm32驱动hx711源码分享 提供给大家学习
06-02
HX711是一款高精度、低成本的压力传感器信号放大器，主要用于测量微小变化的压力或重力信号。 本次使用STM32来驱动他 获得压力数据
dom元素位置改变写从快到慢的动画
03-31
可以使用CSS3的transition属性和transform属性来实现DOM元素位置改变的动画，从而实现从快到慢的动画效果。 具体步骤如下： 1. 首先，需要将要进行动画的DOM元素的初始位置设置为相对定位（position: relative），...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值