offset三大家族

以下是关于 offset 三大家族的知识点总结:

1. offsetParent

  • 定义offsetParent 是距离目标元素最近的已定位(position 不为 static)的祖先元素。
  • 特点
    • 如果父级元素都没有定位,则 offsetParentbody
    • parentNodeparentElement 不同,offsetParent 与定位有关。

2. offsetLeft 和 offsetTop

  • 定义offsetLeftoffsetTop 分别表示目标元素相对于其 offsetParent 左边缘和上边缘的偏移量。
  • 特点
    • 如果父级元素都没有定位,则偏移量是相对于 body 的距离。
    • 这些值适合用于计算,但不带单位,因此不能直接用于设置样式。

3. offsetWidth 和 offsetHeight

  • 定义offsetWidthoffsetHeight 分别表示目标元素的布局宽度和高度。
  • 包含内容
    • 内容区域、内边距(padding)和边框(border)。
    • 不包括外边距(margin)。
  • 特点
    • 这些值适合用于计算,但不带单位,因此不能直接用于设置样式。

4. 注意事项

  • 计算高度offsetHeight 不会包含 margin
  • 与定位的关系offsetParent 与定位有关,而 parentNodeparentElement 与定位无关。
  • 使用场景offsetLeftoffsetWidth 等属性适合用于计算,但不适合直接用于设置样式。

5. 总结

  • offset 三大家族(offsetParentoffsetLeft/offsetTopoffsetWidth/offsetHeight)主要用于获取元素的位置和尺寸信息,适合用于计算和布局调整。
  • 这些属性与元素的定位和布局密切相关,但在设置样式时需要注意其不带单位的特点。
相关推荐
十一吖i2 小时前
vue3表格显示隐藏列全屏拖动功能
前端·javascript·vue.js
徐同保3 小时前
tailwindcss暗色主题切换
开发语言·前端·javascript
生莫甲鲁浪戴4 小时前
Android Studio新手开发第二十七天
前端·javascript·android studio
细节控菜鸡6 小时前
【2025最新】ArcGIS for JS 实现随着时间变化而变化的热力图
开发语言·javascript·arcgis
拉不动的猪7 小时前
h5后台切换检测利用visibilitychange的缺点分析
前端·javascript·面试
桃子不吃李子7 小时前
nextTick的使用
前端·javascript·vue.js
Devil枫8 小时前
HarmonyOS鸿蒙应用:仓颉语言与JavaScript核心差异深度解析
开发语言·javascript·ecmascript
惺忪97989 小时前
回调函数的概念
开发语言·前端·javascript
前端 贾公子9 小时前
Element Plus组件v-loading在el-dialog组件上使用无效
前端·javascript·vue.js
天外飞雨道沧桑9 小时前
JS/CSS实现元素样式隔离
前端·javascript·css·人工智能·ai