记录。
1.先设置两个div,并进行样式设置,测试div为子元素。
2.给父元素开启或不开启定位,查看子元素的offsetLeft,offsetTop值的变化。
3.父元素开启定位与否对于clientWidth,clientHeight,clientTop,clientLeft,offsetWidth,offsetHeight并无影响。
父元素不开启定位
1.样式设置如下
2.控制台输出如下:
父元素开启定位
1.样式设置如下
2.控制台输出如下
总结
client相关
- clientWidth = width + 左右padding;
- clientHeight = width + 上下padding;
- clientTop = 上边距(border-top);
- clientLeft = 左边距(border-left)。
offset相关
- offsetWidth = width + 左右padding + 左右border;
- offseHeight = width + 上下padding + 上下border;
- 父元素不开启定位,offsetLeft、offsetTop相对于body进行计算;
- 父元素开启定位,offsetLeft、offsetTop相对父元素进行计算。