原生js

element.clientHeight

image

element.offsetHeight

image
由上图可以看出他俩的区别就是offsetHeight包括了边框border，注意下面几个属性：

element.scrollHeight // 元素滚动内容的总长度。如果元素没出现滚动条， scrollHeight等于 clientHeight
element.scrollTop   //元素滚动的高度
element.getBoundingClientRect() //获取元素在视窗中的位置

jQuery

width()/height()：获得或设置元素内容的宽/高；若元素的display：none，其值为0。
innerWidth()/innerHeight()：获得包括内边距（padding）的元素宽度/高度，不包括边框；
outerWidth()/outerHeight()：获得包括内边距(padding)和边框(border)的元素宽度/高度；
outerWidth(true)/outerHeight(true)：获得整个元素的宽度/高度，包括外边距、边框、内边距和内容

image

元素偏移量

原生js用element.offsetTop/left是相对于父元素的偏移量；
jQuery用offset()和position()方法，这两个方法都返回一个对象，包含top和left属性。不同的是前者是相对于document，后者相对于已定位的父元素。