7cc/getBoundingClientRect.md

## getBoundingClientRect.md

      
    Raw
  

              getBoundingClientRect.md
            
          
    difference

$(sel).offset().top // jQuery
el.getBoundingClientRect().top + pageYOffset - document.documentElement.clientTop // pure JS
document.documentElement.clientTop?

html {
  border: 10px solid
}


browser
document.documentElement.clientTop returns?


IE
y


Chrome
y


Firefox
n


Don't use document.documentElement.clientTop
el.offsetTop?

Never use el.offsetTop
el.offsetTop
  returns distance from el.offsetParent
  e.g. <td> element's offsetParent is <tr>
el.clientTop
  inline -> 0
  block  -> border-top-width