JS基础操作DOM元素尺寸（offset、client 偏移量窗口尺寸）语法

最新推荐文章于 2025-03-18 15:36:29 发布

xiaodingmao

最新推荐文章于 2025-03-18 15:36:29 发布

阅读量469

点赞数

分类专栏： js基础文章标签： javascript 前端

本文链接：https://blog.youkuaiyun.com/xiaodingmao/article/details/119280336

版权

js基础专栏收录该内容

10 篇文章

订阅专栏

本文详细探讨了在网页开发中如何获取DOM元素的尺寸和偏移量。offsetWidth和offsetHeight属性用于获取元素包括内容、padding和border的整体尺寸，但display:none的元素无法获取。clientWidth和clientHeight则仅包含内容和padding的尺寸。同时，offsetLeft和offsetTop揭示了元素相对于其定位父级的位置。此外，clientLeft和clientTop表示元素padding区域到其border的距离。了解这些属性对于精确布局和动态尺寸调整至关重要。

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

offset

一个元素在页面（文档流）的占位
元素.offsetWidth
元素.offsetHeight
得到该元素的内容+padding+border的尺寸
display:none是拿不到尺寸的,在页面上占位才能拿到尺寸, 如果不占位, 那么拿不到尺寸

client

元素.clientWidth
元素.clientHeight
得到元素的内容+padding的尺寸
注意：display:none是拿不到尺寸的,在页面上占位才能拿到尺寸, 如果不占位, 那么拿不到尺寸

元素偏移量

结构父级：该标签外的标签
定位父级：假设给该标签设置绝对定位时，根据谁来定位的，谁就是定位父级，获取偏移量就参考谁
元素.offsetLeft
元素.offsetTop
该元素相对于参考元素左边和上边的距离
元素.clientLeft
元素.clientTop
该元素自己 padding 区域相对于自己 border 左上角的尺寸，就是上边框 + 左边框

获取窗口尺寸

document.documentElement.clientWidth
document.documentElement.clientHeight
不包含滚动条