Javascript中获取盒子div 标签的实时位置变化情况 offsetRight和offsetButtom没有 ，只有offsetLeft和offsetTop

最新推荐文章于 2024-04-04 06:44:25 发布
最新推荐文章于 2024-04-04 06:44:25 发布
阅读量1.2k 收藏
点赞数 1
分类专栏： html 文章标签： javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45282709/article/details/107069736
版权

我们可以熟练的运用offsetLeft和offsetTop来达到使用offsetRight和offsetButtom的目的
比如right+1 等同于 left-1
button-1 等同意 top+1
换位思考 即可

听风无忧、落雪成眠
关注
专栏目录
【JS笔记】JS中的DOM对象以及通过JS获取DOM结点，操作DOM属性、DOM增删改查
✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。
11-09 1918
DOM，全称是：Document Object Model，文档对象模型，它主要是用于描述HTML文档对象的。一个HTML页面是由许多的标签组成的，例如：html、head、body、div等等标签元素，JS里面将整个的HTML作为一个document文档来进行管理，其中HTML里面的每一个标签都是一个DOM结点。HTML里面所有的DOM结点构成了一颗DOM树，这就有点类似于二叉树了，只不过DOM里面的树是多叉树，因为HTML里面的标签里面可以嵌套许多其他的标签。...
Javascript操作CSS之2——元素位置的获取
张金乙的专栏
06-26 2833
元素位置可以通过访问style属性获取，但是style未初始化的时候获取不到，需要新的方法获取。 元素位置的类型：静态定位（position:static），元素将遵从文档流的安排，静态的展示在页面上，top(bottom)和left(right)将不起作用相对定位（position:relative）,元素将以静态位置为基准，以top和left为位置未知展示出来。例如style="top:-50
深入理解offsetTop与offsetLeft
dk115803的博客
03-30 283
做为走上前端不归路的我，以前只是认为offsetTop是元素的左边框至包含元素offsetParent的左内边框之间的像素距离，同理offsetRight是相对于上内边框。通过查阅资料我还发现 IE6,IE7 对offsetParent解释有BUG，当祖先元素都不是定位元素且本身是定位元素的时候返回document.documentElement，其他情况终返回document.body。页面中的元素的offsetLeft是离其最近的已经定位的元素，如果没有就相对于body元素计算。
没有offsetright，用offsetLeft解决网页右端弹出层的问题，
weixin_43342105的博客
10-10 1639
offsetleft右边写侧边栏
#offsetLeft获取div的
Venciki的博客
05-15 604
javascript练习 offsetLeft 获取 div 的left值
js中有obj.style.top和obj.offsetTop，但是没有obj.style.bottom与obj.offsetBottom怎么办？
m0_63135041的博客
05-11 259
js中有obj.style.top和obj.offsetTop，但是没有obj.style.bottom与obj.offsetBottom怎么办？
获取元素准确的offset
qq_33051709的博客
07-04 461
通过getBoundingClientRect获取（推荐） const getOffset = (element: HTMLElement) => { const elemRect = element.getBoundingClientRect(); const offsetY = elemRect.top + window.scrollY; const offsetX = elemRect.left + window.scrollX; return {
JavaScript-offset家族，前端架构师必备框架技能核心笔记
最新发布
2401_83974117的博客
04-04 903
由于篇幅限制，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
offsetRight
08-31
根据引用，通过使用offset函数，可以获取元素的offsetRight值。该函数接受两个参数，一个是对象obj，一个是方向direction。函数中的逻辑是通过循环找到元素的offsetRight值，并返回该值。而根据引用，在Firefox...
Javascript学习笔记
尚澄澄的博客
06-28 609
JavaScript ECMAScript - JavaScript的核心 定义了JavaScript 的语法规范 JavaScript的核心，描述了语言的基本语法和数据类型，ECMAScript是一套标准，定义了一种语言的标准与具体实现无关 BOM - 浏览器对象模型 一套操作浏览器功能的API 通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等 DOM - 文档对象模型 ...
随意div大小拖动组件_以最简单的方式创建可调整大小和可拖动的角度组件
weixin_26750481的博客
09-14 895
随意div大小拖动组件A resizable and draggable HTML div element can add more possibilities into your website by allowing you to make more flexible components, such as a draggable back-to-top button, a resizable...
jquery offset 方法
MMY
09-16 227
 获取匹配元素在当前视口的相对偏移。返回的对象包含两个整形属性：top 和 left。此方法只对可见元素有效。 <div> <input type="button" value="查看节点" id="btnQuery"> </div> <script type="text/javasc
javascript的offset系列属性总结
汇而不置的博客
06-16 3113
offsetLeft和offsetTop属性 offsetLeft:就是这个元素左边框外，到自己的offsetParent对象的左边框内的距离。 offsetTop:就是这个元素上边框外，到自己的offsetParent对象的上边框内的距离。 offsetParent 表示自己的偏移参考盒子。 IE9,IE9+ chrome等高级浏览器下 offstParent(表示自己的偏移参考盒子)...
offset相关概念+拖动模态框案例+放大镜效果
qq_61706112的博客
02-14 633
一、 offset相关概念 offsetLeft: 指相对于带有定位的父级元素左侧偏移量（若无则以body为基准） offsetTop: 指相对于带有定位的父级元素上方偏移量 offsetWidth：自身的width + padding + border 只读 offsetHeight：自身的height + padding + border 只读 demo：计算鼠标点击盒子时，距离盒子的位置 var box = document.querySelector('.box'); box.ad
操作元素之修改样式属性
leechoy
06-12 662
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
JS、JQuery获取各种高度和元素距离
ksx2333的博客
04-01 5044
文章目录前言1 js原生1.1 offset系列1.2 client系列1.3 scroll系列2 jquery写法2.1 offset和position2.2 元素滚动2.2.1 scrollTop()2.2.2 $(document.body).scrollTop+ $(document.documentElement).scrollTop()2.2.3 $('body,html').scrollTop(60)2.3 元素的尺寸2.3.1 内容尺寸 与css中设置的响应的属性相同2.3.2 内部尺寸2.
JavaScript-offset家族
可可的博客
12-02 1101
JavaScript-offset家族
浅谈js中的offset
小夢書亭的博客
11-01 7097
先看一张图，比较清晰的可以看到offset的使用： offsetHeight: 元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、（可见的）水平滚动条的高度、上边框高度和下边框高度。 offsetWidth: 元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、（可见的）垂直滚动条的宽度、左边框宽度和右边框宽度。 offsetLeft：元素的左外边框至包含元素的左内边框之间的像...
offsetLeft解决网页右端弹出层的问题
m13029825331的博客
09-28 1427
欢迎各路大神指点和挑错 offsetLeft是"到左边的距离" 具体是什么距离呢 是里面的盒模型的左边到这个盒模型的父级盒模型的左边 的距离. 听着可能有些绕口 但是画个图明白了.里层的盒模型简称为 里盒  外层的盒模型 简称为 外盒. ps:请原谅我再电脑上是一个灵魂画手; 正如上图所示:里层盒模型对于外层盒模型来说的左间距为红色线的距离; 此时红色线的距离就是o
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值