深度剖析offsetParent、offsetTop、offsetLeft和ParentNode的区别

  • Post author:
  • Post category:其他




深度剖析offsetParent、offsetTop、offsetLeft和ParentNode的区别


ParentNode:


是直接结构上的父级,并不是显示父级


offsetParent:


有点类似css包含块的概念,并不是包含块的实现,因为包含块是css里面的内容,offsetParent是js里面的内容,offsetLeft和offsetTop是参照offsetParent的内边距边界的。


offsetParent又分为如下几种:


1.父级是否有定位(4种)

2.本身是否有定位(4种)

3.浏览器不一样(5大pc浏览器+老祖宗(ie,7,8))


那么offsetParent一共4X4X8有128种,


如果body和HTML直接的margin被直接清理掉,可以总结为以下几种情况:

本身定位为fixed,


a.offsetParent:null(ie7以上(不是火狐))

b.offsetParent:body(火狐)


本身定位不为fixed,


a,父级没有定位:offsetParent:body

b.父级有定位:offsetParent:定位父级


Haslayout:


ie7以下,如果当前元素的某个父级触发了haslayout,那么offsetParent就会被指向到这个出发了layout特性的父节点上。


注意点:Dom里所有的元素都是有offsetLeft和offsetTop的,不仅仅是针对定位元素的。



版权声明:本文为banhua233251原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。