JavaScript之深入理解偏移量offset

最新推荐文章于 2022-06-21 15:38:44 发布
最新推荐文章于 2022-06-21 15:38:44 发布
阅读量2.1k 收藏 1
点赞数 1
分类专栏： Javascript学习笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/h15882065951/article/details/70142723
版权

前言

偏移量offset是JavaScript中非常重要的一个概念，涉及偏移量的主要属性有：offsetLeft、offsetTop、offsetWidth、offsetHeight。当然，还有一个参照属性---定位父级offsetParent。本文将详细介绍这些内容。

当前元素与定位父级的关系图：



定位父级offsetParent

在理解偏移大小之前，首先要理解的就是定位父级offsetParent，之所以翻译成定位父级，那是因为它跟定位有关系。


定位父级offsetParent的定义：“离”当前元素“最近”的 经过定位的（position不等于static）的父级元素。也就是说，它是一个有position属性的父级元素，当前元素是它的子元素。我们知道，元素查找是逐级向上查找的。

<div id="test" >
  <div id="test1" style="position: relative">
    <div id="test2"></div>
  </div>
</div>

此例#test2的定位父级是#test1，在这个例子中，#test1是唯一的一个有position属性的，所以只有它离#test2最近。 


<div id="test" style="position: relative;">
  <div id="test1" style="position: relative;">
    <div id="test2"></div>
  </div>
</div>

在此例中，#test2的定位父级依然是#test1，尽管#test和#test1都有position属性，但#test1离#test2最近。 


<div id="test" style="position: relative;">
  <div id="test1">
    <div id="test2"></div>
  </div>
</div>

在这个例子中，#test2的定位父级是#test，因为#test有position属性且离#test2最近。



元素自身有fixed定位时，offsetParent返回null。

当元素自身是固定定位时，固定定位是相对于视口定位的，此时没有父级定位，offsetParent返回null。

<!docutype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>深入理解偏移量offset</title>
	<style>
	  
	</style>
  </head>
  <body>
  
    <div id="test">
	  <div id="test1" style="position: relative;">
	    <div id="test2" style="position: fixed;"></div>
	  </div>
	</div>
  
  <script>
    
      var test2 = document.getElementById("test2");
	  
	  console.log(test2.offsetParent); //null
    
  </script>
  </body>
</html>



元素自身无fixed定位，且父级元素未经过定位，offsetParent返回<body>

<!docutype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>深入理解偏移量offset</title>
	<style>
	  
	</style>
  </head>
  <body>
  
    <div id="test">
	  <div id="test1">
	    <div id="test2"></div>
	  </div>
	</div>
  
  <script>
    
      var test2 = document.getElementById("test2");
	  
      console.log(test2.offsetParent); //<body></body>
    
  </script>
  </body>
</html>


元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent返回 离自身元素最近的且经过定位的父级元素。

<!docutype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>深入理解偏移量offset</title>
	<style>
	  
	</style>
  </head>
  <body>
  
    <div id="test" style="position: relative">
	  <div id="test1" style="position: relative">
	    <div id="test2"></div>
	  </div>
	</div>
  
  <script>
    
      var test2 = document.getElementById("test2");
	  
      console.log(test2.offsetParent); //<div id="test1"></div>
    
  </script>
  </body>
</html>


<body>的offsetParent返回null

console.log(document.body.offsetParent); //null


偏移量

偏移量包含offsetLeft、offsetTop、offsetWidth、offsetHeight这四个属性。


offsetWidth

该属性表示元素在水平方向占用的空间大小。无单位（以像素计）。

offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width

offsetHeight

该属性表示元素在垂直方向占用的空间大小。无单位（以像素计）。

offsetHeight = border-top-height + padding-top + height+ padding-top + border-top-height

offsetWidth和offsetHeight在页面中的计算： 

<!docutype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>深入理解偏移量offset</title>
    <style>
	  
    </style>
  </head>
  <body>

    <div id="test" style="position: relative">
      <div id="test1" style="position: relative">
      <div id="test2" style="width: 100; height: 100; margin: 10; padding: 10; border: 1px solid red"></div>
      </div>
    </div>
  
  <script>
    
      var test2 = document.getElementById("test2");
	  
      //122 = 10 + 10 + 100 +2
      console.log(test2.offsetWidth); //122
      //122 = 10 + 10 + 100 +2
      console.log(test2.offsetHeight); //122
      
    
  </script>
  </body>
</html>


注意：如果存在滚动条，offsetWidth也包括垂直滚动条的宽度，offsetHeight也包括水平滚动条的高度。


offsetTop

offsetTop表示元素的上外边框与offsetParent上内边框之间的像素距离。


offsetLeft

offsetLeft表示元素的左外边框与offsetParent左内边框之间的像素距离。


<!docutype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>深入理解偏移量offset</title>
    <style>
	  
    </style>
  </head>
  <body>
  
    
    <div id="test1" style="position: relative;width: 200; height: 200; margin: 10; padding: 10; border: 1px solid red ">
      <div id="test2" style="width: 100; height: 100; margin: 10; padding: 10; border: 1px solid red"></div>
    </div>
	
  
  <script>
    
      var test2 = document.getElementById("test2");
	  
      //20 = test2.marginTop(10) + test1.paddingTop(10)
      console.log(test2.offsetTop); //20
	  
      //20 = test2.marginLeft(10) + test2.marginLeft(10)
      console.log(test2.offsetLeft); //20
	  
	  
  </script>
  </body>
</html>



注意事项


每个偏移量都只是可读的。也就是说不能通过赋值来修改偏移量。

<!docutype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>深入理解偏移量offset</title>
    <style>
	  
    </style>
  </head>
  <body>
  
    
    <div id="test1" style="position: relative;width: 200; height: 200; margin: 10; padding: 10; border: 1px solid red ">
      <div id="test2" style="width: 100; height: 100; margin: 10; padding: 10; border: 1px solid red"></div>
    </div>
	
  
  <script>
    
      var test2 = document.getElementById("test2");
	  
      //20 = test2.marginTop(10) + test1.paddingTop(10)
      console.log(test2.offsetTop); //20
      
      test2.offsetTop = 30;//尝试将偏移量修改为30
      console.log(test2.offsetTop); //20 只是可读的，不能修改。
	  
      //20 = test2.marginLeft(10) + test2.marginLeft(10)
      console.log(test2.offsetLeft); //20
	  
	  
  </script>
  </body>
</html>

上述例子中，想通过赋值运算来修改偏移量，结果是不能修改的，只是可读的。



如果给元素设置了dispaly: none;那么这个元素的偏移量为0。

<!docutype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>深入理解偏移量offset</title>
    <style>
	  
    </style>
  </head>
  <body>
  
    
    <div id="test1" style="position: relative;width: 200; height: 200; margin: 10; padding: 10; border: 1px solid red ">
      <div id="test2" style="display: none; width: 100; height: 100; margin: 10; padding: 10; border: 1px solid red"></div>
    </div>
	
  
  <script>
    
      var test2 = document.getElementById("test2");
	  
      //20 = test2.marginTop(10) + test1.paddingTop(10)
      console.log(test2.offsetTop); //0
      
      test2.offsetTop = 30;//尝试将偏移量修改为30
      console.log(test2.offsetTop); //0 只是可读的，不能修改。
	  
      //20 = test2.marginLeft(10) + test2.marginLeft(10)
      console.log(test2.offsetLeft); //0
	  
	  
  </script>
  </body>
</html>



每次访问偏移量，都需要重新计算，这是一个很耗性能的工作，所以要尽量重复访问这些偏移量。如果需要访问它们，将它们保存在变量中。


「已注销」
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
offset:获取文档中元素的偏移量
06-18
获取文档中 DOM 元素或范围的偏移量。 安装 $ npm install document-offset ： $ component install timoxley/offset 应用程序接口 偏移量(el) 获取文档中元素的偏移量（相对于文档的左上角）。 例子： var ...
（已解决）scrollIntoView和scrollTo方法实现滚动条具体定位无效，offsetTop值不准确
最新发布
evennight的博客
01-10 933
我踩的坑就是我div2给设置了固定高度50px 在计算滚动条还是offsetTop得时候span 获取到的值就不准确，因为我span是不固定高度的，所以就存在着Dom元素偏移，子元素塌陷的问题，只需要给div1与span之间的元素都改成自动计算高度即可 height:auto。我开始实现用了scrollHeight来加子元素的高度实现，后来发现加完后高度总会高出来一部分，以下就是我找了一天时间踩的坑。想实现父元素滚动条效果，子元素可以动态的改变定位，定位到父元素顶部。(2) 是否有高度塌陷问题。
JavaScript----同步异步,offset,client,scroll,结尾附带小案例
你的小甜甜的博客
12-30 343
同步任务与异步任务: 在介绍同步任务与异步任务之前,我们首先要了解一下JS的执行机制,JS语言最大的特点是单线程(单线程:同一个时间只能一件事情) 在DOM操作中充分的展现了单线程的特征:创建一个元素,只有等这个元素创建完成之后才可以将这个元素添加到某个节点中去 但是单线程会导致若一个JS执行的时间过长,会导致页面渲染不连贯,造成这个的原因就是延时任务(计时器,资源加载,事件…)之后的任务要等待延时任务的完成才能执行,若这个延时任务所耗时间过长,后面的任务就会一直进行等待 这个问题计算机采用了CPU多核的特
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
顺其自然~专栏
03-23 321
这里是javascript中制作滚动代码的常用属性 网页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽);（offset：偏移） 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高： documen..
Offset、Scroll、Client偏移知识
iBenxiaohai123的博客
04-13 540
offsetoffset这个单词本身是--偏移，补偿，位移的意思。js中有一套方便的获取元素尺寸的办法就是offset家族；offsetWidth、offsetHight、offsetLeft、offsetTop、offsetParent，共同组成了offset家族。1、offsetWidth和offsetHight（是用来检测盒子自身宽高+padding+border）这两个属性，他们绑定在了所...
元素偏移量 offset 系列
JJ_Smilewang的博客
06-21 995
offset 翻译过来就是偏移量， 我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 (1) 获得元素距离带有定位父元素的位置 (2) 获得元素自身的大小（宽度高度） (3) 注意： 返回的数值都不带单位offset 系列常用属性有：（1）offset ① offset 可以得到任意样式表中的样式值 ② offset 系列获得的数值是没有单位的 ③ offsetWidth、offsetHeight包含padding+border+width ④ offsetWidth、
JavaScript-----元素偏移量offset
weixin_45904557的博客
06-20 1948
offset翻译过来就是偏移量，我们使用offset系列相关属性可以动态的得到该元素的位置（偏移)、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小(宽度高度) 注意:返回的数值都不带单位...
元素偏移量offset的学习
m0_51528800的博客
05-18 1580
元素偏移量offset的学习 元素偏移量offset的学习一、offset概述offset与style的区别 一、offset概述 offset就是偏移量，使用offset系列相关属性可以动态地得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素地位置； 获得元素自身的大小（宽度、高度）； 返回的数值都不带单位。 offset系列常用属性： 举例： <!DOCTYPE html> <html lang="en"> <head> <meta
32. 偏移量 offset
potato123232的博客
06-17 992
offset相关的属性可以获取（只能获取，不能修改）元素的位置(偏移)、大小等信息下面这些是常用的属性目录1 element.offsetTop2 element.offsetLeft3 element.offsetParent4 element.offsetWidth5 element.offsetHeight6 offset与style的区别7 获取鼠标在盒子内的坐标8 登录框拖拽9 放大镜效果 element.offsetTop会返回 自身 与 上一级带定位的父元素 的 上方偏移，如果
offset元素偏移量
GY的博客
06-18 915
offset元素偏移量
c语言offset函数,offset偏移量 offset函数怎么用，详细一点…
weixin_35971306的博客
05-22 6037
什么叫偏移地址偏移地址就是计算机里的内存分段后，在段内某一地址相对于段首地址(段地址)的偏移量。偏移地址也称为偏移量，由于8086/8088CPU内部的ALU只能进行16位的运算，而8086/8088有20条地址线，直接寻址能力1MB。关于偏移量(Offset)的概念，不仅仅只是在 C 语言中可以体现，实际上再各种编程语言中都是可以体现出来的。 通俗地讲，偏移(Offset)就是指从当前位置为起点...
polygon-offset:多边形偏移量的小库（marginpadding）
05-06
库很大，其中的偏移量是子例程。 该库依赖于多边形裁剪算法，与之重合约14kb。 安装 节点 $ npm install polygon-offset 浏览器 var Offset = require ( 'polygon-offset' ) ; 浏览器 < script src =" path/...
js 获取元素在页面上的偏移量的方法汇总
10-24
javascript可以通过四个属性可以获得元素的偏移量，分别是1、offsetHeight，2、offsetWidth，3、offsetLeft，4、offsetTop，今天我们就来具体谈一下获取页面元素偏移量的最佳方法。
ember-cli-array-offset:灰烬CLI阵列偏移代理
05-15
ember-cli-array-offset公开一个 子类，该子类仅在特定偏移量之后返回内容数组项。 例子 import Ember from 'ember' ; import ArrayOffset from 'array-offset' ; var arr = Ember . A ( [ 'a' , 'b' , 'c' , 'd' ,...
js-offset-res：[js]偏移结果数组
02-15
偏移量 [js]偏移结果数组。 安装 npm install kc-offset-res 使用 var offsetRes = require ( 'kc-offset-res' ) ; var arr = [ 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ] ; var res = offsetRes ( arr , 5 ) ; console ...
JavaScript之Canvas画布
热门推荐
但愿人长久 千里共婵娟
04-18 3万+
HTML5有个强大的功能，就是利用canvas进行画图。
HTML5中的地理定位API（Geolocation）
但愿人长久 千里共婵娟
08-01 4290
地理定位API用于定位用户的地理位置。
JavaScript之防篡改对象（高级技巧）
但愿人长久 千里共婵娟
05-15 3736
在实际开发中，有时会无意地修改了别人的代码，或者用不兼容的功能重写原生对象，这样会给整个开发带来困扰。
JavaScript之事件类型（事件）
但愿人长久 千里共婵娟
04-15 3273
web浏览器发生的事件有很多类型，不同的事件类型包含不同的信息，“DOM3级”的事件类型大概有：UI事件、焦点事件、滚轮事件、文本事件、鼠标事件、键盘事件、合成事件、变动事件、变动名称事件等。
js 获取元素偏移量
07-27
- *3* [js获取元素的偏移量offset](https://blog.csdn.net/liang5603/article/details/76690993)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值