JS操作html元素三大家族中的offset/offsetParent作用

JS操作html元素三大家族中的offset/offsetParent作用_第1张图片
web.jpeg

我们在开发中有时会遇到获取元素的widthheight等样式


    
JS操作html元素三大家族中的offset/offsetParent作用_第2张图片
image.png
JS操作html元素三大家族中的offset/offsetParent作用_第3张图片
image.png

style标签中设置的样式属性获取不到
style属性中设置的样式属性是可以获取到的

那么如何获取到 width 和height呢? offset属性可以获取
在标准流的情况下


JS操作html元素三大家族中的offset/offsetParent作用_第4张图片
image.png

上面例子的布局,只是给父级元素添加了margin-left padding-left border

JS操作html元素三大家族中的offset/offsetParent作用_第5张图片
image.png


JS操作html元素三大家族中的offset/offsetParent作用_第6张图片
image.png

有次可以得出 在标准流的情况下 子元素的 offsetLeft = 父元素的 margin-left + padding-left + border-left + 自身元素的margin-left
同理 offsetTop也是如此

定位的情况下
  • 不管父级盒子有没有定位,自己元素的offsetLeft = 自身的margin-left + 自己定位的left
  • 如果父级盒子没有定位,那么子元素是相对 祖先元素的left和margin-left
JS操作html元素三大家族中的offset/offsetParent作用_第7张图片
image.png
JS操作html元素三大家族中的offset/offsetParent作用_第8张图片
image.png
  • 父级元素定位
JS操作html元素三大家族中的offset/offsetParent作用_第9张图片
image.png


总结:offsetLeft和offsetTop作用
1.获取元素到第一个定位祖先元素之间的偏移位
2.如果没有祖先元素是定位的, 那么就是获取到body的偏移位

offsetParent作用

获取元素的第一个定位祖先元素
如果没有祖先元素是定位的, 那么就是获取到的就是body


JS操作html元素三大家族中的offset/offsetParent作用_第10张图片
image.png

你可能感兴趣的:(JS操作html元素三大家族中的offset/offsetParent作用)