元素的位置属性offset、client、scroll

最新推荐文章于 2025-01-27 21:26:45 发布
原创 最新推荐文章于 2025-01-27 21:26:45 发布 · 624 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #开发语言 #ecmascript #scrollTop #clientHeight #offsetTop

本文详细解析了HTMLDOM中的offset、client和scroll属性，包括它们各自的方法（如offsetTop,clientWidth等）及其含义，以及如何计算元素在浏览器视窗中的实际位置和大小，附有图表辅助理解。

一、offset、client、scroll

1.1 offset

  • offsetTop、offsetLeft
  1. offsetTop：元素到offsetParent顶部的距离
  2. offsetParent：距离元素最近的具有定位的祖宗元素（relative、absolute、fixed），若祖宗元素都不符合条件，offsetParent为body。
  3. offsetLeft：同上。
  • offsetWidth、offsetHeight
  1. offsetWidth = width + 左右padding +左右border
  2. offsetHeight = height + 上下padding + 上下border
    注意他们的宽高都包含滚动条。

1.2 client

  • clientWidth、clientHeight
  1. clientWidth = width + 左右padding
  2. clientHeight = height + 上下padding
  • clientTop、clientLeft
  1. clientTop = boder.top(上边框的宽度)
  2. clientLeft = boder.left(左边框的宽度)

1.3 scroll

  • scrollWidth、scrollHeight
    scrollWidth：获取指定标签内容层的真实宽度（可视区域宽度+被隐藏区域宽度） scrollHeight：获取指定标签内容层的真实高度（可视区域高度+被隐藏区域高度）
  • scrollTop、scrollLeft
    scrollTop: 内容层顶部 到 可视区域顶部的距离
    scrollLeft: 内容层左端 到 可视区域左端的距离

引用一张图可以直观表示这些属性
在这里插入图片描述

菊の物语
关注
元素偏移（offset，scroll,client)介绍，动态设置类名，样式
qq_48763502的博客
08-17 2673
属性 / 方法描述表示一个元素的顶部边框的宽度，以像素表示。表示一个元素的左边框的宽度，以像素表示。在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）
offset、client 和 scroll【JavaScript】
2302_77228054的博客
09-24 581
在JavaScript中，offset、client和scroll是用于获取元素位置和尺寸的不同属性或概念。它们之间的区别主要体现在它们的值和使用场景上。
网页元素位置(scroll、client、offsetWidth等)获取、设置详解
09-01
网页元素位置(scroll、client、offsetWidth等)获取、设置详解
Web前端之JavaScript与Vue获取屏幕宽高、元素宽高、距离、位置、document、window、screen、client、offset、scroll、avail
热门推荐
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
11-12 1万+
Web前端之JavaScript与Vue获取屏幕宽高、元素宽高、距离、位置、document、window、screen、client、offset、scroll、avail
vue全局修改message 的offset_理解vue实现原理，实现一个简单的Vue框架
weixin_39969232的博客
01-19 2002
其实对JS我研究不是太深，用过很多次，但只是实现功能就算了。最近JS实在是太火，从前端到后端，应用越来越广泛，各种框架层出不穷，忍不住也想赶一下潮流。 Vue是近年出的一个前端构建数据驱动的web界面的库，主要的特色是响应式的数据绑定，区别于以往的命令式用法。也就是在var a=1;的过程中，拦截’=’的过程，从而实现更新数据，web视图也自动同步更新的功能。而...
vue获取元素offsetTop，mounted获取不到offsetTop，获取元素距离页面顶边距离
weixin_65230316的博客
10-12 4605
通过官方的这张图片知道beforeUpdate阶段一定是mounted已经执行结束，在这个阶段能够正常获取到dom，如果没有触发beforeUpdate在data里加一个值手动修改触发。记录一下开发过程中遇到的坑，今天想做一个功能，当我评论完之后，页面跳到评论区顶部，于是就要获取到评论区距离页面顶部的距离，需要循环获取offsetTop来实现。随后用老办法获取距离顶边的距离然后存到vuex中来实现跨多级组件传递。解决：通过beforeUpdate阶段获取。
vue.js中如何实时获取某个div的offsetWidth的变化
songqiu821的博客
07-07 4596
在写vue的项目时，遇到这样一个问题，就是如果实时获取到一个div的offsetWidth的变化，查了很多资料使用element-resize-detector插件可以实现， 偶然间看到一个知乎上的简单回答，便记录下，借鉴于：https://www.zhihu.com/question/346607121/answer/827773405 mounted() { const resizeObserver = new ResizeObserver(entries => {
js中offset,client , scroll 三大元素知识点总结
10-16
本篇将详细介绍与元素尺寸位置和滚动相关的三个重要的属性家族：offset系列、client系列和scroll系列。这些属性为我们提供了元素位置信息，窗口或元素内部的滚动距离等重要数据，对于实现页面布局和交互功能至关重要...
javascript中offset、client、scroll的属性总结
12-12
JavaScript中的offset、client和scroll属性是用于获取和操作HTML元素...在JavaScript中处理元素尺寸和位置时，了解并正确使用offset、client和scroll属性至关重要，它们可以帮助我们创建更加动态和响应式的网页界面。
不知道为什么添加el.offsetWidth之后 vue过渡动画成功
qq_44698161的博客
11-15 1699
活在今天的格子里 使用vue中的过渡动画的时候：注意在使用javascript钩子的时候动画效果是无法出来的，得要额外的添加一句el.offsetWidth ??? 解释是这样的（非官方）： 原因在于浏览器不会根据你js对style的修改实时更新，而一般是在当前js修改完毕之后，会对所有修改统一更新，而display:none(它本身是不能transition的)的状态切换影响了其他过渡效果的切...
vue项目中，如何获取某一部分的宽高
最新发布
嗨，欢迎来到我的 优快云 博客小天地！一名深耕多年的技术发烧友。在这里，我将把日常工作中积累的宝贵经验，从复杂架构设计的精妙之处，到代码优化的实战技巧，毫无保留地分享给大家。
01-27 5296
vue如何获取某一部分的宽高
offsetLeft,Left,clientLeft详解(…
墨鱼的博客
03-04 433
假设 obj 为某个 HTML 控件。 obj.offsetTop 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算上侧位置，整型，单位像素。 obj.offsetLeft 指 obj 相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置，整型，单位像素。 obj.offsetWidth 指 obj 控件自身的绝对宽度，不包括因 overflo
js三大系列
YiRan_BuFanTeXi的博客
08-09 244
一. offset系列 offset系列的5个属性 offsetLeft : 用于获取元素到最近的定位父盒子的左侧距离 计算方式: 当前元素的左边框的左侧到定位父盒子的左边框右侧 如果父级盒子没有定位, 那么会接着往上找有定位的盒子 如果上级元素都没有定位,那么最后距离是与body的left值 offsetTop : 用于获取元素到最近定位父盒子的顶部距离 计算方式:当前元素的上...
节点属性、offset*获取元素尺寸、offsetLeft获取元素定位
YY的博客
10-20 1184
offsetWidth、offsetHeight、clientWidth、clientHeight、offsetLeft、offsetTop
vue 踩坑（一）
Celine
11-23 1840
1、后来添加的html代码，样式应用不上去后来添加的html代码，比如是append进去的，这样的话我们写的样式只适合本页面使用的scoped, 但是这样的样式就是应用不上去。这就很尴尬了。 后来才知道，后续添加的html片段是没有经过vue编译过得，所以本页面的样式是应用不上的，但是我们可以通过全局的样式控制住。2、v-model 这真是一个神奇的东西啊，好用的一笔一般form表单会使用v-m
offset系列属性
woshi6yi的博客
03-29 332
offsetTop/offserLeft 可以返回元素的偏移位置（不带单位为的数值）相对于带有定位的父级 没有则是相对于body offsetWidth/offsetHeight 可以得到元素的大小 是包括padding+border+width clientWidth 得到的元素大小不包含边框 offsetParent 返回带有定位的父亲节点 如何计算出鼠标在盒子里的坐标 x = e.pageX - this.offsetLeft; y = e.pageY - this.offsetTop;
DOM 中的 offset 属性
cocytus
09-04 2970
1. DOM 中的 offset 属性 1.1. offsetParent 与当前元素最近的经过定位(position 不等于 static)的父级元素，主要分为下列几种情况： 元素自身有 fixed 定位，offsetParent 的结果为 null 当元素自身有 fixed 固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent 的...
vue 获取元素距离页面顶部的偏移值
weixin_45173576的博客
09-08 2579
// 获取元素 let div = document.getElementsByClassName('goods_detail')[0] // 获取scrollTop let div_scrolltop = div.offsetTop
VUE 学习之parent 选项
liubangbo的专栏
05-23 4324
在vue 官网上关于parent选项有以下描述： 指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用this.$parent访问父实例，子实例被推入父实例的$children数组中 在网上关于这个选项的介绍也很少。 搜索到一个，根据信息做个demo如下： let vueVm = new Vue({ el: "#app", data: { ...
offset client scroll
03-16
offset client scroll是指客户端滚动的偏移量。在网页中，当用户滚动页面时，页面会发生滚动，此时可以通过JavaScript获取页面滚动的偏移量，即offset client scroll。这个偏移量可以用来实现一些特殊的效果，比如滚动到某个位置时触发某个事件，或者实现一些滚动动画等。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值