以下是关于 offset 三大家族的知识点总结:
1. offsetParent
- 定义 :
offsetParent是距离目标元素最近的已定位(position不为static)的祖先元素。 - 特点 :
- 如果父级元素都没有定位,则
offsetParent为body。 - 与
parentNode和parentElement不同,offsetParent与定位有关。
- 如果父级元素都没有定位,则
2. offsetLeft 和 offsetTop
- 定义 :
offsetLeft和offsetTop分别表示目标元素相对于其offsetParent左边缘和上边缘的偏移量。 - 特点 :
- 如果父级元素都没有定位,则偏移量是相对于
body的距离。 - 这些值适合用于计算,但不带单位,因此不能直接用于设置样式。
- 如果父级元素都没有定位,则偏移量是相对于
3. offsetWidth 和 offsetHeight
- 定义 :
offsetWidth和offsetHeight分别表示目标元素的布局宽度和高度。 - 包含内容 :
- 内容区域、内边距(
padding)和边框(border)。 - 不包括外边距(
margin)。
- 内容区域、内边距(
- 特点 :
- 这些值适合用于计算,但不带单位,因此不能直接用于设置样式。
4. 注意事项
- 计算高度 :
offsetHeight不会包含margin。 - 与定位的关系 :
offsetParent与定位有关,而parentNode和parentElement与定位无关。 - 使用场景 :
offsetLeft和offsetWidth等属性适合用于计算,但不适合直接用于设置样式。
5. 总结
offset三大家族(offsetParent、offsetLeft/offsetTop、offsetWidth/offsetHeight)主要用于获取元素的位置和尺寸信息,适合用于计算和布局调整。- 这些属性与元素的定位和布局密切相关,但在设置样式时需要注意其不带单位的特点。