一文搞清前端盒子尺寸问题offsetWidth、offsetHeight、offsetLeft、offsetTop、clientWidth..

于 2023-11-30 16:28:41 发布
阅读量120 收藏
点赞数
分类专栏： JS CSS web 文章标签： 前端 javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jolly_zhang/article/details/134714417
版权
JS 同时被 3 个专栏收录
13 篇文章 0 订阅
订阅专栏
CSS
7 篇文章 0 订阅
订阅专栏
web
4 篇文章 0 订阅
订阅专栏

一图看懂各个距离尺寸

在这里插入图片描述

属性注释
offsetWidth盒子宽度，包含boder以内的宽度
offsetHeight盒子高度，包含boder以内的高度
offsetLeft1.默认相对于body左边的距离；2.如果祖先元素中有定位的元素，此时相对于最近的有定位的祖先元素左边的距离
offsetTop1.默认相对于body上边的距离；2.如果祖先元素中有定位的元素，此时相对于最近的有定位的祖先元素上边的距离，
clientHeight不包括boder的盒子高度
clientWidth不包括boder的盒子宽度
scrollWidth在设置了overflow的css样式中，超出父元素盒子的整体宽度
scrollHeight在设置了overflow的css样式中，超出父元素盒子的整体高度
scrollTop在设置了overflow的css样式中，初始为0，盒子向上滚动，视图看不到的盒子的高度
scrollLeft在设置了overflow的css样式中，初始为0，盒子向左滚动，视图看不到的盒子的宽度
Jolly_zhang
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
10-30
**offsetWidth** 和 **offsetHeight** 用于获取元素的总宽度和总高度，包括所有内容、内边距（padding）、边框（border），但不包括外边距（margin）。 - **offsetWidth**: 获取元素相对于版面或由父坐标 `...
JS中offsetTop、clientTop、scrollTop、offsetTop各位置属性详解（含示例图）
热门推荐
小菜吉的博客
02-28 2万+
这里是javascript中制作滚动代码的常用属性 页可见区域宽： document.body.clientWidth; 网页可见区域高： document.body.clientHeight; window.innerHeight; 网页可见区域宽： document.body.offsetWidth (包括边线的宽); 网页可见区域高： document.body.offsetHeight (包括边线的宽); 网页正文全文宽： document.body.scrollWidth; 网页正文全文高..
网页宽高clientWidth、offsetWidth、offsetTop 、offsetLeft宽高解析
林中明月间丶
05-18 3720
offsetLeft[Top]:只读 属性 当前元素到定位父级的距离（偏移值）到当前元素offsetLeft的距离 style.width:样式宽 clientWidth:样式宽+padding(可视区宽)（如果有滚动条还要包括滚动条的宽度） offsetWidth:样式宽+padding(可视区宽)+border(边框)、(不包括margin) scrollWidt......
【前端 | CSS】盒模型clientWidth、clientHeight、offsetWidht、offsetHeight
最新发布
趟过java，遇见web
08-10 1520
只读属性Element.clientWidth对于内联元素以及没有 CSS 样式的元素为 0；该属性包括内边距（padding），但不包括边框（border）、外边距（margin）和垂直滚动条（如果存在） offsetWidth 是测量包含元素的边框 (border)、水平线上的内边距 (padding)、竖直方向滚动条 (scrollbar)（如果存在的话）、以及 CSS 设置的宽度 (width) 的值。
前端学习笔记（21）之JS中的offsetWidth、offsetHeight、clientWidth、clientHeight等等的详细介绍
前端下午茶
08-19 780
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距） clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距） clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距） style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距） st
offsetWidth、offsetLeft、 clientWidth的区别
weixin_44932552的博客
05-14 964
元素视图属性: 元素属性通过 elem.属性 方式使用 clientWidth 水平方向 width + 左右padding clientHeight 垂直方向 height + 上下padding offsetWidth 水平方向 width + 左右padding + 左右border-width offsetHeight 垂直方向 height + 上下padding + 上下border-width 1.offsetWidth属性可以返回对象的padding+border+width属性值之和，st
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
10-15
在JavaScript中，DOM元素的尺寸和位置是网页布局的关键因素，`offsetWidth`、`clientWidth`、`innerWidth`以及一系列相关属性方法用于获取和处理这些信息。这些属性可以帮助开发者精确地控制页面元素的显示效果，...
前端大厂最新面试题-HTML面试题.docx
06-06
* offsetWidth、offsetHeight、offsetTop、offsetLeft * scrollWidth、scrollHeight、scrollTop、scrollLeft * scrollIntoView()、scrollIntoViewIfNeeded() * getComputedStyle() * getBoundingClientRect() * ...
由document.body和document.documentElement想到的
09-06
类似地，`offsetLeft`、`offsetWidth`、`offsetHeight`分别与`style.left`、`style.width`、`style.height`相对应，它们之间也存在类似的差异。 关于页面尺寸的获取，有多种方法，每种方法针对不同的场景： 1. `...
彻底搞懂offsetHeight，clientHeight，scrollHeight，scrollTop，offsetTop
m0_50441807的博客
07-17 584
滚动条滚动的距离，也就是滚动的内容被卷入的高度，一般用于设置滚动条的位置；获取的高度除了自身高度外，还包含了padding和border。注红色盒子的scollHeight就是绿色盒子的高度。获取的高度除了自身高度外，还包含了padding。与父级盒子顶部的距离；...
前端开发之JavaScript的offset相关属性
imbzz的博客
07-26 835
avaScript的offset相关属性
clientHeight、offsetHeight、scrollHeight、scrollTop的区别以及上拉加载的实现
weixin_40380115的博客
06-11 1749
在前端的项目中，为了提高性能经常会使用到上拉加载，、、、是实现上拉 加载的关键。所以，首先来介绍下三者的意义以及区别。 ：表示的是当前显示的元素的高度，如果存在X轴的滚动条与根元素边框，不包括X轴的滚动条与根元素边框的高度 。 ：也表示的是当前显示元素的高度，与clientHeight类似，但offsetHeight包括X轴的滚动条与根元素边框的高度。 ：表示内容区域的整个高度，包括溢出的内容区域，即滚动条的 高度。 ：表示的是滚动条滚动的高度，初始未滚动时的高度为0。 具体如下图所示： 有上图可知：of
Web前端之 offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft
菜鸟程序员成长路
10-18 1124
  二、涉及问题和总体概括：          如果你对width，offsetWidth，clientWidth，scrollWidth，offsetLeft，clientLeft，scrollLeft这几个的差别还不是很熟悉，那你最好翻阅资料搞清楚， 当然，你也可以看一下本文（虽然写的很差劲）；这几个概念，你会在开发的时候经常用到，因此，掌握还是很有必要的。         首先来说一...
offsetLeft,clientX,clientWidth了解
weixin_44860440的博客
06-01 185
地址： https://blog.csdn.net/qq_43219422/article/details/89352290
DOM元素尺寸位置计算总结clientWidth&offsetWidth&offsetParent&offsetLeft&scrollWidth&scrollLeft
一起来看烟花吧的博客
09-23 744
CSS盒模型 CSS中的 box-sizing 属性定义了浏览器应该如何计算一个元素的总宽度和总高度。 链接：https://blog.csdn.net/chenjie9230/article/details/108718480 content-box:包括内容区 padding-box:包括内容区+内边距 border-box:包括内容区+内边距+边框 浏览器内核 浏览器 内核 Google Chrome Webkit 俗称为Chromium内核或Chrome内核 Internet E
window.onload事件触发条件
木木木森林
01-26 1188
目录window.onload 事件触发条件：鼠标的 mouseover 事件和 mouseenter 事件的区别分析基本数据类型和引用数据类型的区别基本类型值特点：引用类型值特点：为什么要标签语义化？ window.onload 事件触发条件： 当所有的DOM节点全部加载完成。 页面中所有的资源（音频视频图片等等）全部加载完成。 鼠标的 mouseover 事件和 mouseenter 事件的区别 mouseover和mouseenter都是移入事件。 mouseover会触发冒泡。 mouseen
clientWidth、offsetWidth、区别
weixin_50736511的博客
12-01 8728
clientWidth和clientHeigh 、 clientTop和clientLeft 1，clientWidth的实际宽度 clientWidth = width+左右padding 2，clientHeigh的实际高度 clientHeigh = height + 上下padding 3，clientTop的实际宽度 clientTop = boder.top(上边框的宽度) 4，clientLeft的实际宽度
【带图】讲解offsetHeight、offsetLeft、clientWidth、scrollHeigth、scrollTop等几个属性的区别
Gyoung杨广
03-29 2482
1.偏移量元素的可见大小由其高度、宽度决定，包括所有内边距、滚动条和边框的大小（注意，不包括外边距）。offsetHeight：元素在垂直方向上占用的空间大小，以像素计。包括元素的高度、水平滚动条的高度、上边框高度和下边框的高度。offsetWidth：元素在水平方向上占用的空间大小，以像素计。包括元素的宽度、垂直滚动条的宽度、左边框宽度和右边框宽度。offsetLeft：元素的左外边框至包含元素...
【前端】clientHeight, offsetHeight,scrollHeight, offsetTop,scrollTop
procstu的博客
03-08 585
clientHeight clientHeight = content height + paddingTop + paddingBottom clientHeight并不会包含border和横向滚动条的高度 对于行内元素，值为0 offsetHeight offsetHeight = content height + paddingTop + paddingBottom + borderTop + borderBottom + 横向滚动条高度 offsetHeight不会包含margin 对于行内..
做小方块效果 要求:1.小方块活动范围在边框里 2.小方块靠近边框可以吸上去
06-13
var x = event.clientX - container.offsetLeft - block.offsetWidth / 2; var y = event.clientY - container.offsetTop - block.offsetHeight / 2; if (x ) { x = 0; } else if (x > container.clientWidth ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值