对js offset位置 宽高的理解

Posted 2020-09-03

clientTop,clientLeft:元素边框宽度。  clientWidth:元素width+元素padding。 offsetWidth:元素width+元素padding+元素边框宽

 

offsetWidth,offsetHeight: 元素的可见宽度和高度。只跟该元素的本身有关

offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)

offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)

offsetLeft,offsetRight：与offsetParent有关

offsetLeft=(offsetParent的padding-left)+(中间元素的offsetWidth)+(当前元素的margin-left)。

offsetTop=(offsetParent的padding-top)+(中间元素的offsetHeight)+(当前元素的margin-top)。

offsetParent为body时情况比较特殊:

在IE8/9/10及Chrome中，offsetLeft = (body的margin-left)+(body的border-width)+(body的padding-left)+(当前元素的margin-left)。

在FireFox中，offsetLeft = (body的margin-left)+(body的padding-left)+(当前元素的margin-left)。

offsetParent:

1、如果当前元素的父级元素没有进行CSS定位（position为absolute或relative），offsetParent为body。

2、如果当前元素的父级元素中有CSS定位（position为absolute或relative），offsetParent取最近的那个父级元素。