三大系列：offset，scroll，client

最新推荐文章于 2025-02-19 18:12:20 发布

卖菜的小白

最新推荐文章于 2025-02-19 18:12:20 发布

阅读量1.2k

点赞数 4

分类专栏： js面试题文章标签： offset scroll client

本文链接：https://blog.csdn.net/weixin_47450807/article/details/123339537

版权

本文详细介绍了offset、scroll和client系列属性，帮助读者彻底理解这几个浏览器坐标相关的概念，解决一直以来的疑惑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、写在前面
之前一直对于offset，scroll, client这几大属性表示很懵，今天一文针对这些属性进行总结，从此再也不懵逼。
二、offset系列
1、offsetWidth属性

offsetWidth返回当前的元素宽度，这个宽度包括内容的宽度 + border的宽度 + padding的宽度。
offsetWidth是只读属性

2、offsetHeight属性

offsetHeight返回的是当前元素的高度，这个高度包括内容的高度 + border的高度 +
offsetHeight是只读属性

3、offsetLeft属性

offsetLeft属性存在两种情况，一： 如果当前元素没有脱离文档流，此时
offsetLeft表示获取当前元素到定位父元素左侧的距离，如果父元素没有定位，则继续向上查找，知道找到body为止。
二：如果该标签元素脱离文档流，此时offsetLeft = margin-left +<

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

卖菜的小白

关注关注

4
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

offset client scroll详解

前端初学

10-22

563

location对象 location对象是window对象下的一个属性 location可以获取或设置浏览器地址栏的url history对象 back（）：回到上一级 forward（）下一级 go（）：跳转 navigator 对像 userAgent（）：可以查看当前浏览器的类型 platform（）：可以查看用户的操作系统类型偏移量给两个盒子（都有padding和margin，border） <div id="box"> <div id="son"&gt

offset、client、scroll

m0_46978034的博客

03-22

467

文章目录1.元素偏移量offset系列 1.元素偏移量offset系列 1.offset系列相关属性可以动态的得到元素该元素的位置(偏移)/大小。注意点获得元素距离带有定位父元素的位置，如果父元素没有定位则以body为准获得元素自身的大小（宽度）返回的数值都是不带单位的 offset常用属性代码演示如下 <style> .father { position: relative; width: 200px;

参与评论您还未登录，请先登录后发表或查看评论

ScrollOffset

06-21

滚动偏移当插入点靠近边缘时，ScrollOffset 会自动滚动缓冲区，类似于 vim 的 scrolloff 工作方式。 ScrollOffset 适用于多个选择，您可以更改距边缘的距离。这个插件是使用 Layout-Coordinates 实现的，所以当你启用word_wrap时它也可以工作。当您使用不适合视口的多个选择时，将使用 Sublimes 默认行为。这在未来的版本中可能会发生变化 - 您可以在代码中找到一个TODO来添加此类行为的逻辑。忽略鼠标输入滚动OFFSET在选择更改时运行。如果您想出于 ScrollOffset 目的而忽略鼠标输入，则还必须安装。一旦安装了 MouseEventListener，ScrollOffset 将自动开始忽略鼠标输入。但是，选择超过视口可以显示的数量仍然感觉有点尴尬。由于 Sublime 不提供检测鼠标拖动的可能性

offset系列属性

Charlie8915的博客

01-26

845

scroll、offset、client三大家族和getBoundingClientRect方法

最新发布

太阳与星辰的博客

02-19

1268

scroll、offset、client和getBoundingClientRect方法

client offset scroll的区别

weixin_30760895的博客

06-29

167

client offset scroll 三大家族 javaScript中的client offset scroll 经常用到，为了区分三者之间的区别，总结了一下： clientWidth：获取网页可视区域的宽度(两种用法) clientHeight：获取网页可视区域的高度(两种用法) clientX：鼠标距离可视区域左侧的距离(event调用) clientY：鼠标距离可视区域上侧的距离(e...

三剑客：offset、client和scroll还傻傻分不清？

01-18

在学习前端的过程中，我们经常会碰到offset, client与scroll，所以我就把它们称作为‘三剑客’。 01 offset – 偏移量定义：元素在屏幕上占用的所有的可见的空间。元素可见的大小由其高度、宽度决定，包括所有内...

js中offset,client , scroll 三大元素知识点总结

10-16

js中offset、scroll、client三大系列

流楚丶格念的博客

08-21

4028

文章目录offset系列：元素scroll系列：获取元素的样式属性client系列：可视区域案例：图片跟着鼠标飞简单版（有bug，一滚动就不行了）终极版：可以在任何的浏览器中实现 offset系列：元素获取元素的宽和高,left,top, offsetParent,应该使用offset系列来获取 offsetWidth:获取元素的宽 offsetHeight:获取元素的高 offsetLeft:获取元素距离左边位置的值 offsetTop:获取元素距离上面位置的值 scroll系列：获取元素的样式属性元

深入浅出JavaScript: offset, client, scroll家族详解

资源摘要信息:"JavaScript必修课_offset,client,scroll家族" 知识点一：JavaScript基础 JavaScript是网页与用户进行交互的重要工具，它是前端开发的基石。学习JavaScript的基础包括了解其语法、数据类型、运算符等...

offset系列、client系列、scroll系列的属性

yawhom的博客

06-29

1146

1. offset系列属性 1.1 offsetTop属性: 此属性可以获取元素的上外缘距离最近采用定位父元素内壁的距离，如果父元素中没有采用定位的，则是获取上外边缘距离文档内壁的距离。所谓的定位就是position属性值为relative、absolute或者fixed。返回值是一个整数，单位是像素。 1.2 offsetLeft属性: 此属性和offsetTop的原理是一样的，只不

元素的offset，scroll,client之间的区别和联系

Blueberry

11-12

147

元素的offset，scroll,client之间的区别和联系 1.offset的偏移量是相对于父元素有定位时的偏移量；ps:元素自身有fixed定位，offsetParent的结果为null;2.scroll是父元素内的内容滚动时的偏移；3.client是元素本身的偏移量（元素周围边框的厚度,如果不指定一个边框或者不定位改元素,他的值就是0）；I...

offset、client与scroll

世界和我们都不该止步于此

04-17

1248

目录一.offset 1.offsetParent 2.offsetTop 3.offsetLeft 4.offsetWidth 5.offsetHeight 6.offset与style的区别二.client 1.clientTop 2.clientLeft 3.clientWidth 4.clientHeight 三.scroll 1.scroll四大属性 2.理解scroll四大属性四.总结一.offset 我们使用offset相关属性可以...

PC 端网页特效

菜鸡成长站

03-16

264

哎1. 元素偏移量 offset 系列1.1 offset 概述1.2 offset 与 style 区别案例：获取鼠标在盒子内的坐标案例：模态框拖拽 1. 元素偏移量 offset 系列 1.1 offset 概述 offset 翻译过来就是偏移量，我们使用 offset 系列相关属性可以动态的得到该元素的位置（偏移）、大小等。获得元素距离带有定位父元素的位置获得元素自身的大小（宽度高度）注意：返回的数值都不带单位 offset 系列常用属性： offset 翻译过来就是偏移量，我们使用

元素偏移（offset，scroll,client)介绍，动态设置类名，样式

qq_48763502的博客

08-17

2477

属性 / 方法描述表示一个元素的顶部边框的宽度，以像素表示。表示一个元素的左边框的宽度，以像素表示。在页面上返回内容的可视高度（高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）在页面上返回内容的可视宽度（宽度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条）返回任何一个元素的高度包括边框（border）和内边距（padding），但不包含外边距（margin）

JavaScript client系列

weixin_30449453的博客

08-19

230

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <script src="common.js"></script> <script...

三大系列offset,scroll,client

一个半路出家的人

09-17

314

1,offset系列通过style的方式获取属性值,只能获取在标签中写的值(因为这个值没有单位) offset 系列: offsetWidth:获取元素的宽,没有单位 offsetHeight:获取元素的高,没有单位 offsetLeft:获取向左定位值 offsetTop:获取向上定位值当父元素,子元素都没有脱离文档流时 offsetLef 为父盒子margin + ...

scroll、offset和client如何区分

qq_36309066的博客

12-07

428

DOCTYPE> head> meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> title>比较title> style type="text/css"> *{ padding: 0; margin: 0; } body{