Offset,Scroll和Client三大系列总结

最新推荐文章于 2025-05-29 12:53:27 发布
最新推荐文章于 2025-05-29 12:53:27 发布
阅读量1.1k 收藏 11
点赞数 3
CC 4.0 BY-SA版权
分类专栏： javaScript 前端 文章标签： Offset系列总结 Scroll系列总结 Offset Scroll和Client三大系列总结 Client系列总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Calla_Lj/article/details/90269626

Offset,Scroll和Client三大系列总结

offset系列 scroll系列 client系列
offsetWidth scrollWidth clientWidth
offsetHeight scrollHeight clientHeight
offsetLeft scrollLeft clientLeft
offsetTop scrollTop clientTop
offsetParent — —
  • Offset系列

在这里插入图片描述
说明:
@ offsetWidth和offsetHeight: width/height + padding + border;
@ offsetParent: 有定位的上一级父盒子,如果都没有定位会一直找到body
@ offsetTop和offsetLeft: 是盒子的border到上一级定位父盒子(也就是offsetParent)的距离

最低0.47元/天 解锁文章

200万优质内容无限畅学
三大系列：offset，scroll，client
weixin_47450807的博客
03-07 1284
一、写在前面 之前一直对于offset，scroll, client这几大属性表示很懵，今天一文针对这些属性进行总结，从此再也不懵逼。 二、offset系列 1、offsetWidth属性 offsetWidth返回当前的元素宽度，这个宽度包括内容的宽度 + border的宽度 + padding的宽度。 offsetWidth是只读属性 2、offsetHeight属性 offsetHeight返回的是当前元素的高度，这个高度包括内容的高度 + border的高度 + offsetHeight是只读属性
offset client scroll详解
前端初学
10-22 574
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系列
weixin_43768585的博客
12-06 353
一、offsetWidth和offsetHeight 作用： 只能获取对象的宽度和高度，不能修改。 offsetWifth ( 或offsetHeight) = width (或 height)+border+padding (注意：不包括外边距！)2.offsetWifth ( 或offsetHeight) = width (或 height)+border+padding (注意：不包括...
offset 家族和 client 家族
最新发布
JLY19970726的博客
05-29 643
摘要：前端开发中，offset家族和client家族是获取元素尺寸与位置的关键属性。offset家族包含offsetWidth/Height（总尺寸含边框）、offsetLeft/Top（相对定位父元素偏移）和offsetParent（定位参考）；client家族包含clientWidth/Height（可视尺寸不含边框）、clientLeft/Top（边框宽度）和clientX/Y（鼠标视口坐标）。两者分别适用于计算元素占用空间和内部可用区域，需注意滚动条影响、动态更新及盒模型差异。典型应用包括拖拽定位、
offset、client与scroll
世界和我们都不该止步于此
04-17 1274
目录 一.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相关属性可以...
【client】与【offset】
04-19 128
上面主要区分了【offset】和【client】开头的各个属性的意义，下面这张图是转载的，又加入了【scroll】开头的，和元素本身的【style】 clientWidth 是对象看到的宽度（不含border）scrollWidth 是对象实际内容的宽度（若无padding，那就是边框之间距离，如有padding，就是左padding和右padding之间距离）。offse...
js中offset,client , scroll 三大元素知识点总结
10-16
本篇将详细介绍与元素尺寸位置和滚动相关的三个重要的属性家族：offset系列、client系列和scroll系列。这些属性为我们提供了元素位置信息，窗口或元素内部的滚动距离等重要数据，对于实现页面布局和交互功能至关重要...
js中offset、scroll、client三大系列
流楚丶格念的博客
08-21 4041
文章目录offset系列：元素scroll系列：获取元素的样式属性client系列：可视区域案例：图片跟着鼠标飞简单版（有bug，一滚动就不行了）终极版：可以在任何的浏览器中实现 offset系列：元素 获取元素的宽和高,left,top, offsetParent,应该使用offset系列来获取 offsetWidth:获取元素的宽 offsetHeight:获取元素的高 offsetLeft:获取元素距离左边位置的值 offsetTop:获取元素距离上面位置的值 scroll系列：获取元素的样式属性 元
JavaScript基础——offset和client
爱前端的程序媛的博客
03-16 1638
offset和client系列 以下都是对象的属性：这些属性可读不可写，跟style有区别。style可读也可写。 这个属性使用赋值”=“ ，即可获取属性值 元素的偏移量——offset 元素的偏移量，也就是元素的位置。offsetTop：返回的是元素距离最近开启定位的父元素顶部的距离，若没有开启定位的父元素，则是距离页面的顶部距离offsetLeft：返回的是元素距离最近开启定位的...
PC端网页特效（一）
zhr_beyond的博客
03-10 466
PC端网页特效（一） 1.元素偏移量 offset 系列 （1）offset offset 就是偏移量，可以动态的得到该元素的位置、大小等 ● 获取元素距离带有定位父元素的位置 ● 获取元素自身的大小 ● 返回的数值不带单位 （2）offset 系列常用属性 offset系列属性 作用 element.offsetParent 返回作为该元素带有定位的父级元素 如果父级没有 element.offsetTop 返回元素相对带有定位父元素上方的偏移 element.offsetLeft
offset概述、client系列
smile__w的博客
11-25 484
offset概述、client系列
JS三大属性实战：offset、client、scroll详解
莫踌躇
01-04 555
本文详细介绍了JavaScript中offset、client和scroll三大属性的区别与应用。offset用于获取元素位置和大小（含边框和内边距），client用于获取元素可视区域大小（不含边框），scroll用于获取元素滚动距离。文章通过对比表格清晰展示了各属性的功能差异，并提供了兼容性解决方案。最后通过放大镜效果的实战案例，演示了如何在实际开发中运用这些属性。掌握这三大属性对于精准控制页面元素布局和交互效果具有重要意义。
offset和client两者的区别
lmmmmmm 的代码生活
06-18 974
文章目录前言`offset`、 `client`、 `scroll`Height & WidthTop & LeftclientX & clientY 前言 最近在看 pink 老师的 JavaScript 的视频，学到 offset 、 client 属性 看到后面跟不上老师的思路，分不清这两者之间的区别 今天下午上课的时候去看了下这两个之间的区别，在 CodePen 上试了下，来记下笔记以后忘了能来复习 offset、 client、 scroll client -> 主
offset、client、scroll
m0_46978034的博客
03-22 482
文章目录1.元素偏移量offset系列 1.元素偏移量offset系列 1.offset系列相关属性可以动态的得到元素该元素的位置(偏移)/大小。 注意点 获得元素距离带有定位父元素的位置，如果父元素没有定位则以body为准 获得元素自身的大小（宽度） 返回的数值都是不带单位的 offset常用属性 代码演示如下 <style> .father { position: relative; width: 200px;
JavaScript 特效之四大家族（offset/scroll/client/event）
carriehaohao的博客
03-06 2059
JS四大家族 三大系列：offset、scroll、client 事件对象：event（事件被触动时，鼠标和键盘的状态）（通过属性控制） 三大系列都是以DOM元素节点的属性形式存在的。 类比访问关系，也是以属性形式存在。 不同点在于，访问关系是为了获取其他节点，而三大系列是为了获取元素节点更多的信息。
Web APIs 学习笔记（七）--- offset、client和scroll系列属性
weixin_45092437的博客
05-16 1027
一、元素偏移量 offset 系列属性 1、offset 概述 ​ offset系列属性可以动态的获得页面中某元素的偏移量，也就是元素位置，以及元素的宽度高度等属性。但是要注意，获得的元素的偏移量是元素相对于带有定位的父元素的位置，如果没有带定位的父元素，则是相对于页面的位置。而且获得的元素的宽度和高度是包括元素的border、padding的。最后所有属性的返回值都是数值型，不带单位。 2、offset系列属性 ​ 总结： **offsetWidth=width+padding+border
区别client、offset、scroll系列以及event的几个距离属性
VivianHope的专栏
07-28 4730
element元素结点属性一. offset系列1.offsetWidth 和offsetHeightelement.offsetWidth是一个只读属性，它包括了： css width + padding+border+垂直滚动条宽度 这里的滚动条就是单纯滚动条的意思，不包括不可见的部分哦。 而element.offsetHeight与之类似，只是改为垂直方向而已。 在页面布局中要计算和考
前端学习记录——offset与client
GuardianMANGO的博客
02-19 867
offset与client
scroll、offset和client的区别
weixin_30437337的博客
04-22 172
整体布局： <!DOCTYPE> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>比较</title> <style type="text/css"> *{ padding: 0; ...
前端三剑客：理解offset、client与scroll的区别与用法
在前端开发中，"三剑客"——offset、client和scroll是三个经常被开发者混淆的概念，用于理解和操作网页元素在页面中的位置和尺寸。这些概念主要涉及元素在浏览器视口中的布局和滚动行为。 1. **offset**: - 偏移量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值