js 中元素偏移量 offset 常用属性

最新推荐文章于 2022-05-07 08:44:06 发布
最新推荐文章于 2022-05-07 08:44:06 发布
阅读量141 收藏
点赞数
分类专栏： 前端基础 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36123470/article/details/119171780
版权

好久没写原生js，一些api的基础知识容易忘记。最近项目不太忙，就在闲暇时间快速过一遍js基础知识。
之前项目中遇到的问题，上网百度很多人说的比较含糊，也有很多文章都大同小异，后来我决定自己决定以后将可能会用到或者项目中用的比较多的东西，但是自己记不住，容易忘记的知识记录下来，方便自己也方便大家。
今天看到offset 的时候，就有了这篇文章，因为之前我总是搞混，总是要试试，哪个合适就用哪个。下面我把每个属性都记录下来，以后用的时候查一下不同点就知道该用哪个属性了

在这里插入图片描述
在这里插入图片描述

咿呀咿呀哟~~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
javascript - 鼠标偏移量
zyljjf的博客
09-26 1233
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; padding: 0; }
JS中offsetTop、clientTop、scrollTop、offsetTop各属性介绍
05-09
`offsetTop`和`offsetLeft`是两个常用的属性，用于获取一个元素相对于其父元素或最近的定位祖先元素（position不是static的祖先元素）的偏移量。这两个属性返回的是数值类型的数据，单位为像素。 **示例**： ```...
JavaScript中偏移量属性
H_zhiyi的博客
11-18 976
偏移量：获取在已定位的父级元素的子元素位置属性   offsetLeft  取正值从左向右偏移，取负值从右向左偏移   offsetTop  取值从上向下偏移，取负值从下向上偏移   offsetWidht  获取元素的宽度   offsetHeight  获取元素的高度   offsetParent  获取定位过的父元素，即有可能不是离得最近的父级元素 客户区大小：   clientLeft  离已定位的父级元素的左边距，包括自身左边框宽度   clientTop  离已定位的父级元素的上边距，包括自身上
一文看懂js中元素偏移量（offsetLeft,offsetTop,offsetWidth,offsetHeight）
sinat_41212418的博客
11-01 6352
偏移量（offset dimension） 偏移量：包括元素在屏幕上占用的所有可见空间,元素的可见大小由其高度，宽度决定，包括所有内边距，滚动条和边框大小（注意，不包括外边距）。 以下4个属性可以获取元素的偏移量 offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度（可见的），水平滚动条的高度，上边框高度和下边框高度。 offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度（可见的），垂直滚动条的宽度，左边框宽度和右边框宽度。 3: off
20、offset 元素偏移量
weixin_45998542的博客
12-17 1197
20、offset 元素偏移量 1. offset 概述 offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。 获得元素距离带有定位父元素的位置 获得元素自身的大小（宽度高度） 注意：返回的数值都不带单位 <body> <div class="father"> <div class="son"></div> </div> &lt
Javascript 偏移量总结
weixin_30625691的博客
07-27 160
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title&g...
jquery根据锚点offset值实现动画切换
12-11
`offset()`返回元素相对于浏览器视口的顶级偏移量，包括元素的边距。它返回一个对象，包含`top`和`left`两个属性，分别表示元素顶部和左边距离浏览器顶部和左边的距离。 在这个示例中，我们有四个带有背景图片的div...
常用js收集，功能强大js
05-08
JavaScript，简称JS，是一种轻量级的解释型编程语言，广泛应用于网页和网络应用开发，实现客户端的动态效果和交互。在本压缩包中，我们收集了一些常用的JS代码片段，这些代码可以帮助开发者实现多种功能，使得网站或...
jQuery原理系列-常用Dom操作详解
11-25
接着，jQuery提供了获取元素偏移量的方法。`$(el).position()`返回元素相对于其最近的定位祖先元素的偏移，包括`offsetLeft`和`offsetTop`。而`$(el).offset()`则返回元素相对于文档视口的绝对位置，这通常涉及到`...
JQUERY学习笔记2
09-13
- **偏移量**：`.offset()`返回元素相对于文档的位置，包括`left`和`top`两个属性。 ```javascript var p = $("p:last"); var offset = p.offset(); p.html("left: " + offset.left + ", top: " + offset.top); ...
js获取元素的偏移量offset简单方法(必看)
10-19
下面小编就为大家带来一篇js获取元素的偏移量offset简单方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JavaScript中对象偏移量相关属性介绍 一
weixin_46449470的博客
04-12 380
javascript中对象偏移量： offsetWidth：元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight：元素的高度（包括元素高度、内边距和边框，不包括外边距） offsetTop：相对于最近的有定位的父元素的距离（纵向：距离父元素上边），如果父元素都都没有定位，父元素就是body offsetLeft:相对于最近的有定位的父元素的距离（横向：距离父元素左边）...
js中的宽度、高度、偏移量问题，offset、client、scroll
pxzsl的专栏
08-14 3473
经常把这几个搞混淆，根据《JavaScript高级程序设计》第12章的内容简单总结下1、offset，这个是偏移量，包括元素在屏幕上占用的所有可见的空间。包括所有内边距、滚动条和边框大小（注意：不包括外边距），有4个属性：offsetWidth、offsetHeight、offsetLeft、offsetTop。 offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、水
用位移实现盒子垂直水平居中
weixin_58414196的博客
03-07 260
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt
JS中~偏移量设定方式与案例分析
qq_64970126的博客
05-07 1236
1、history对象方法 2、offset偏移量方法 3、对于偏移量与普通样式的区分 4、鼠标箭头样式：
javascript 偏移量
duancheng509的专栏
09-10 2227
通过四个属性可以获得元素的偏移量： 1、offsetHeight: 元素在垂直方向上占用的空间的大小，（像素）。包括元素的高度，（可见的）水平滚动条的高度，上边框高度和下边框高度。 2、offsetWidth:元素在水平方向上占用的空间的大小，，（像素）。包括元素的宽度，（可见的）垂直滚动条的高度，左边框高度和右边框高度。 3、offsetLeft: 元素的左外边框至包含元素的左内边框之间的
js获取元素的偏移量offset
liang5603的专栏
08-04 4005
null和undefined都代表没有，但是null是属性存在值不存在，undefined是连这个属性都不存在 //例如 document.parentNode//浏览器天生自带的一个属性：父亲节点的属性 null (因为一个页面中的document已经是最顶级元素了，它没有父亲) document.parentnode//undefined (因为没有parentnode这
JS获取窗口，元素尺寸与偏移量
weixin_40606003的博客
01-03 1370
获取浏览器窗口的大小 文档区域 ：指的是html或body的宽高（不包含导航栏，地址栏等浏览器组件）。 窗口 ：指的是整个浏览器窗口（包含导航栏，地址栏等浏览器组件） 文档可视区域 ：指的是文档区域中可以看到网页内容的区域，例如当文档区域可以滚动的时候，减去被隐藏的区域，剩下的就是可见的区域。 视口 ：浏览器中呈现网页内容的区域（不包含导航栏，地址栏等浏览器组件） 1.1 innerHei...
JS html元素以及偏移量
boonyaxnn的博客
04-08 1731
一、html元素 var html = document.documentElement; 1、获取视口的宽高 console.log('width',html.clientWidth); console.log('height',html.clientHeight); 2、获取包含滚动条视口宽高 滚动条的宽度是17px console.log('包含滚动条width',wind...
js 获取元素偏移量
最新发布
07-27
回答: 在JavaScript中，可以使用offset()方法来获取元素的偏移量。这个方法返回一个包含top和left属性的对象，分别表示元素相对于文档顶部和左侧的偏移量。例如，可以使用$("div").offset().top来获取一个div元素相...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

咿呀咿呀哟~~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值