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)主要用于获取元素的位置和尺寸信息,适合用于计算和布局调整。
  • 这些属性与元素的定位和布局密切相关,但在设置样式时需要注意其不带单位的特点。
相关推荐
liaojuajun44 分钟前
可视化地图
开发语言·javascript·ecmascript
小高0071 小时前
前端如何优雅地生成唯一标识?——一份跨环境 UUID 工具函数的封装与实战
前端·javascript·vue.js
我是日安1 小时前
从零到一打造 Vue3 响应式系统 Day 24 - Watch:Options
前端·javascript·vue.js
小*-^-*九6 小时前
Electron vue项目 打包 exe文件
javascript·vue.js·electron
gplitems1238 小时前
Gunslinger – Gun Store & Hunting WordPress Theme: A Responsible
开发语言·前端·javascript
Winson℡11 小时前
React Native 中的 useCallback
javascript·react native·react.js
谢尔登13 小时前
【Nest】基本概念
javascript·node.js·express
EveryPossible14 小时前
带有渐变光晕
前端·javascript·css
jojo是只猫14 小时前
Vue 3 开发的 HLS 视频流播放组件+异常处理
前端·javascript·vue.js
林烈涛15 小时前
js判断变量是数组还是对象
开发语言·前端·javascript