offset和client两者的区别

最新推荐文章于 2024-09-23 11:47:40 发布

_lmmmmmm

最新推荐文章于 2024-09-23 11:47:40 发布

阅读量930

点赞数 1

文章标签： js html5 html css

本文链接：https://blog.csdn.net/Lai_im/article/details/106836234

版权

本文介绍了JavaScript中offset和client属性的区别，详细讲解了Height & Width、Top & Left以及clientX & clientY的含义和使用场景。offset主要涉及网页可视区的位置，而client则与元素自身大小相关。通过实例演示帮助理解两者差异。

摘要由CSDN通过智能技术生成

文章目录

前言
`offset`、 `client`
总结

前言

最近在看 pink 老师的 JavaScript 的视频，学到 offset 、 client 属性
看到后面跟不上老师的思路，分不清这两者之间的区别
今天下午上课的时候去看了下这两个之间的区别，在 CodePen 上试了下，来记下笔记以后忘了能来复习

`offset`、 `client`

client -> 主要是网页的可视区位置的获取
offset -> 主要是自身大小的获取

Height & Width

属性	描述
`element.clientWidth`	获取元素可视区的宽度
`element.offsetWidth`	获取元素的宽度
`element.clientHeight`	获取元素可视区的高度
`element.offsetHeight`

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_lmmmmmm

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

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

10-16

client、offset和scroll的区别和用法

qiyuancoder的博客

10-30

1535

今天在项目中需要获取一个弹出框的实际内容高度，这个没什么问题，用scrollHeight，但是我想到了有两个类似的宽高属性client和scroll，由于用得少，似乎有点淡忘了，在此总结如下： 1、client client系列有4个属性： clientWidth：元素没被设置宽度，clientWidth = 元素实际宽度 + padding左右内间距元素被设置宽度，clientWidth = 元素被设置的宽度 + padding左右内间距 clientHeight：同上，宽度改为高度，padding

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

区别offset系列、client系列和scroll系列

m0_64430775的博客

04-02

318

offset、client和scroll系列的区别

一文搞懂offset、client、scroll系列及案例

最新发布

每天都要努力学习哦~~

09-23

843

使用鼠标在页面中的坐标（pageX，pageY） - 盒子在页面中的偏移量（offsetLeft，offsetTop）使用client系列的相关属性可获取元素可视区的相关信息，可动态得到元素的边框大小、元素大小等。实现效果：侧边栏刚开始为相对定位，当页面滚动到一定距离后改为绝对定位并显示返回顶部按钮。使用scroll系列的线管属性可以动态得到元素的大小、滚动距离等。）拿到鼠标在模态框内的坐标下x，y（原理为1-3-1）当鼠标拖动模态框开始移动时（client系列获取的内容也。），移除鼠标移动事件。

三大系列（offset、client、scroll）总结（相同点、不同点和他们的主要用法）

qq_51387458的博客

04-05

265

三大系列（offset、client、scroll）总结（相同点、不同点和他们的主要用法）

js - 原生js中offset和client以及scroll之间的区别

qq_43886365的博客

11-23

528

原生js中offset和client以及scroll之间的区别

offset、client、scroll三大系列详细分析

super码力的博客

12-28

1247

1.offset系列经常用于获得元素位置offsetLeftoffsetTop 2.client经常用于获取元素大小clientWidthclientHeight 3.scroll 经常用于获取滚动距离scrollTopscrollLeft 4.注意页面滚动的距离通过 window.pageXOffset 获得

javascript中offset、client、scroll的属性总结

10-23

JavaScript作为前端开发中不可或缺的脚本语言，提供了丰富的DOM操作接口，其中offset、client、scroll属性是常用的一组用于获取元素尺寸和位置信息的接口。这组属性可以帮助开发者精确地获取元素的尺寸、位置以及...

javascript的offset、client、scroll使用方法详解

10-27

JavaScript提供了三组常用的属性来帮助我们实现这些功能，它们分别是offset系列、client系列和scroll系列。下面将详细介绍这些属性的使用方法。首先，我们从offset系列属性开始介绍。offset系列属性包含offsetTop...

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

01-18

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

offset与client的区别

qq_41189709的博客

08-06

1653

offsetWidth 返回的是内容加边框的宽度，width+border clientWidth 返回的只有内容的宽度，不包含边框的宽的 width offsetLeft 返回的是距离上一个有定位父级元素的左边距离 clientLeft 返回的是左边框的宽度 ...

Web APIs 学习笔记（七）--- offset、client和scroll系列属性

weixin_45092437的博客

05-16

973

一、元素偏移量 offset 系列属性 1、offset 概述 offset系列属性可以动态的获得页面中某元素的偏移量，也就是元素位置，以及元素的宽度高度等属性。但是要注意，获得的元素的偏移量是元素相对于带有定位的父元素的位置，如果没有带定位的父元素，则是相对于页面的位置。而且获得的元素的宽度和高度是包括元素的border、padding的。最后所有属性的返回值都是数值型，不带单位。 2、offset系列属性总结： **offsetWidth=width+padding+border

offset、client、scroll、style、offsetParent、parentNode几者之间的区别

zhuliqinlikeluho的博客

01-31

129

offset、client、scroll、style、offsetParent、parentNode几者之间的区别

offset client 的区别

asukaayame的博客

07-26

292

offset client 的区别

JavaScript基础——offset和client

爱前端的程序媛的博客

03-16

1569

offset和client系列以下都是对象的属性：这些属性可读不可写，跟style有区别。style可读也可写。这个属性使用赋值”=“ ，即可获取属性值元素的偏移量——offset 元素的偏移量，也就是元素的位置。offsetTop：返回的是元素距离最近开启定位的父元素顶部的距离，若没有开启定位的父元素，则是距离页面的顶部距离offsetLeft：返回的是元素距离最近开启定位的...

offset概述、client系列

smile__w的博客

11-25

435

offset概述、client系列

前端学习记录——offset与client

GuardianMANGO的博客

02-19

827

offset与client

offset、client、scroll

m0_46978034的博客

03-22

450

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

offset和client两者的区别

文章目录

前言

offset、 client

Height & Width

`offset`、 `client`