【标题】#博学谷IT学习技术支持#哦--------------------------------- 元素偏移量offset&元素可视区 client&触屏事件

最新推荐文章于 2024-11-01 15:19:31 发布
最新推荐文章于 2024-11-01 15:19:31 发布
阅读量101 收藏
点赞数
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yz0810688/article/details/126456571
版权
本文详细介绍了前端开发中元素的偏移量(offset)、可视区(client)以及触屏事件的相关属性和区别。内容涵盖offset系列属性如offsetParent、offsetTop等，元素可视区的clientWidth、clientHeight，以及触屏事件如touchstart、touchmove、touchend，并讲解了移动端元素拖动的实现原理。
摘要由CSDN通过智能技术生成

  ♥一元素偏移量offset

  ♥一元素偏移量offset

♥二常用属性

 ♥三 offset 与 style 区别

 ♥四 元素可视区 client

♥五元素滚动 scroll

♥六 触屏事件

  ♥一offset 概述

1. 获得元素距离带有定位父元素的位置

2. 获得元素自身的大小（宽度高度）

3. 注意：返回的数值都不带单位 

 ♥二常用属性

offsetParent  返回作为该元素带有定位的父级元素,如果父级都没有定位则返回body

offsetTop  返回元素相对带有定位父元素上方的偏移

offsetLeft 返回元素相对带有定位父元素左边框的偏移
offsetwidth 返回自身包括 padding、边框、内容区的宽度，返回数值不带单位

offsetHeight 返回自身包括 padding、边框内容区的高度，返回数值不带单位

 ♥三 offset 与 style 区别

offset 可以得到任意样式表中的样式值

offset系列获得的数值是没有单位的

最低0.47元/天 解锁文章
yz0810688
关注
BOM ------ offset (元素偏移量)
HuoZhiyan 的博客
02-19 335
offset: 可以动态的得到该元素的位置(偏移),大小等 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 返回的数值都不带单位 element.offsetParent: 返回作为该元素带有定位的父级元素 如果父级都没有定位则返回body element.offsetTop: 返回元素相对带有定位父元素上方的偏移 element.offsetLeft: 返回元素相对带有定位父元素左边框的偏移 element.offsetWidth: 返回自身包括padding 边框 内容区的宽度
九、JavaScript网页特效 - 章节课后练习题及答案
熊先森的博客
06-09 8166
JavaScript网页特效 - 章节课后练习题及答案，使用的是人民邮电出版社出版的《JavaScript+jQuery 交互式 Web 前端开发》书籍。
offset client scroll+本地存储笔记
fanlangke的博客
04-30 175
offset client scroll offset offset概述 offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 1.获得元素距离带有定位父元素的位置 2.获得元素自身的大小（宽度高度) 3.·注意：返回的数值都不带单位 offset系列属性 element.offsetParent 返回作为该元素带有定位的父级元素如果父级都没有定位则返回body element.offsetTop 返回元素相对带有定位父元素上方的偏移 element.
JavaScript-网页特效
m0_70617074的博客
08-19 488
offsetWidth:返回元素自身的宽度，返回值也不带单位；persisted来判断是否是缓存中的页面触发的pageshow事件，注意这个事件给window添加的。3.3立即执行函数最大的作用就是独立创建了一个作用域，里面所有的变量都是局部变量 不会有命名的冲突。offsetHeight：返回元素自身的高度，返回值也不带单位。offsetLeft：返回元素相对带有定位父元素左边的偏移。offsetTop:返回元素相对于定位父元素上方的偏移。1.3返回带有定位的父元素（position定位）
BOM ------ scroll 系列
HuoZhiyan 的博客
02-20 319
scroll 系列 element.scrollTop: 返回被卷去的上册距离,返回数值不带单位 element.scrollLeft: 返回被卷去的左侧距离, 返回数值不带单位 element.scrollHeight: 返回自身实际的高度, 不含边框, 返回数值不带单位 element.scrollWidth: 返回自身实际的宽度, 不含边框, 返回数值不带单位 实例 <!DOCTYPE html> <html lang="en"> <head> &lt
项目（5） - 必掌握知识点 - #博学谷IT学习技术支持#
weixin_44946585的博客
12-01 371
然后你会神奇的发现点击的那个推荐频道跑到我的频道中了，我们并没有去手动的删除点击的这个推荐频道，但是它没了！主要是因为推荐频道是通过一个计算属性获取的，计算属性中使用了 channels（我的频道）数据，所以只要我的频道中的数据发生变化，那么计算属性就会重新运算获取最新的数据。提示：获取登录用户的频道列表和获取默认推荐的频道列表是同一个数据接口。没有用来获取推荐频道的数据接口，但是我们有获取所有频道列表的数据接口。2、在编辑频道组件中请求获取所有频道数据。2、在频道编辑组件中声明接收父组件的。
汇川机器人编程手册-S01.19R02
12-09
《汇川机器人编程手册-S01.19R02》是针对汇川技术公司生产的机器人设备的一份详细编程指南，旨在帮助用户理解和掌握汇川机器人的编程操作。手册覆盖了从基本概念到实际操作的各个方面，是学习和使用汇川机器人系统的...
项目（2） - 必掌握知识点 - #博学谷IT学习技术支持#
weixin_44946585的博客
09-18 102
1、创建 并写入以下内容 2、然后在 中配置登录页的路由表 最后，访问 查看是否能访问到登录页面。这里主要使用到三个 Vant 组件：1、 2、 实现基本登录功能 思路：一、根据接口要求绑定获取表单数据1、在登录页面组件的实例选项 data 中添加 数据字段 2、在表单中使用 绑定对应数据 最后测试。二、请求登录1、创建 封装请求方法 2、给登录按钮注册点击事件 最后测试。Vant 中内置了Toast 轻提示组件，可以实现移动端常见的提示效果。 另外需要注意的是：Toast 默认采用单例模式，
Vue.js项目实战开发（4）- 必掌握知识点 - #博学谷IT学习技术支持#
weixin_44946585的博客
08-21 672
vue生命周期、axios、$ref、$nextTick、动态组件、槽函数
精品资料（2021-2022年收藏）优秀教师述职报告.doc
10-11
4. 班级管理：班主任注重班级的长期建设和博学性，通过自身的广泛知识影响学生，使他们养成爱学习的习惯，形成博学多才的群体。同时，鼓励学生个性发展，提出积极竞争的班级理念。 5. 团队精神：强调班级的凝聚力和...
元素偏移量offset 元素可视区client 元素滚动scroll 立即执行函数 mouseenter事件 动画函数封装
procul的博客
04-01 171
元素偏移量offset element.offsetTop 返回元素相对于带有定位父元素上方的偏移 //如果没有父亲或父亲没有定位，以body为准 element.offsetLeft 返回元素相对于带有定位父元素左边框的偏移 //如果没有父亲或父亲没有定位，以body为准 element.offsetWidth 返回元素的宽度 宽度包括p...
html相对定位向上偏移,jQuery源码解析之postion()相对父元素的偏移位置
weixin_36365795的博客
06-07 525
jQuery的position()方法jQuery的position()方法用于获取元素相对于父元素的偏移。返回的对象有两个属性：top和left。这个功能其实要想简单的实现，可以直接通过elm.offsetLeft和elm.offsetTop来获取。但是在IE7及以下版本下，获取的这两个属性总是相对于body的偏移位置。妹纸前端varoff3=document.getElementById("...
js---三大系列(元素偏移量offset,元素可视区client,元素滚动scroll)
清风的博客
09-13 459
1.元素偏移量offset系列 1.1offset 1.获取元素距离带有定位父元素的位置; 2.获得元素自身的大小; 3.返回的数值都不带单位; //返回该元素带有定位的父级元素,如果父级元素都没有定位则返回body element.offsetParent //返回元素相对带有定位父元素上方的偏移 element.offsetTop //返回元素相对带有定位父元素左边框的偏移 element....
JS的元素偏移量offset.元素可视区client.元素滚动scroll.的作用及其区别
weixin_45658984的博客
02-17 303
1.元素偏移量offset; 我们可以使用offset系列相关属性可以动态的得到元素的位置(偏移).大小等… element.offsetParent; 返回的是该元素的带有定位的父级元素,如果父级没有定位就返回body. element.offsetTop; 返回元素相对带有定位的父级元素上方的偏移 element.offsetLeft; 返回元素相对带有定位的父级元素左方的偏移 elemen...
js-网页特效 —— 动画函数封装
mocoll的博客
08-20 251
四、动画函数封装 4.1、动画实现原理 核心原理:通过定时器setInterval0不断移动盒子位置。 实现步骤: 1.获得盒子当前位置。 2.让盒子在当前位置加上1个移动距离。 3.利用定时器不断重复这个操作 4.加一个结束定时器的条件 5.注意：此元素需要添加定位,才能使用element.style.left 4.2、动画函数的封装 注意函数需要传递2个参数,动画对象和移动到的距离。 4.3、动画函数给不同元素记录不同定时器 如果多个元素都使用这个动画函数,每次都要var声明定时器。我们可以给不同的元素
HTML 元数据标签 ＜meta＞ 全面解析：如何利用字符集、描述、关键字和视口提升网站质量
最新发布
Allen-
11-01 71
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
炫酷的登录框!(附源码)
m0_50864141的博客
10-29 1862
【代码】炫酷的登录框!(附源码)
HTML小阶段二维表和思维导图
2301_79075752的博客
10-29 818
下面是对标签、元素、属性的对比二维表，通过对比3w1h（what是什么、where用在哪、why为什么要用、how如何用）来学习区分学习标签、元素、属性标签元素属性what（Tags）标签是用来标记内容块或标明元素内容意义（Element）网页内容是由元素组成的，一个元素通常由一个开始标签、内容、其他元素及一个结束标签组成。（Attribute）与元素相关的特性，用于提供额外的信息或配置选项。where开始标签：位于元素的开头，用于标记一个元素的开始。
Html编写发射粒子爱心
m0_58419490的博客
10-31 567
【代码】Html编写发射粒子爱心。
Virtex-6 FPGA GTX收发器用户指南：快速开发支持
这份手册的主要目标是为GTX模块的开发人员提供全面的技术支持，包括设计指导、配置选项、性能优化以及注意事项。 首先，手册涵盖了GTX传输器的概述，介绍了其在 Virtex-6平台上的功能和特性，如高带宽数据传输能力...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值