JavaScript 中各种高度的获取图示

JavaScript 中各种高度感觉不好记忆，每次都要去百度（其实是自己记不住）于是总结一下。 其实网上也能搜到类似的图，但好像都是那一个，奇丑无比。于是自己画了一个，只标注的高度，因为感觉高度用的比较多，其实都有对应的宽度，就不标注了显的太乱。

距离父元素顶部的距离

// js
ele.offsetTop;

// jq
$('ele').offset().top;

网页被卷起来的高度

// js
document.documentElement.scrollTop || document.body.scrollTop
window.pageYOffset

// jq
$(window).scrollTop()

元素的高度/宽度

// js
document.querySelector('.eleClass').clientHeight;

// jq
$('.eleClass').height();

窗口的高度

//js
window.innerHeight || document.documentElement.clientHeight

getBoundingClientRect

//元素顶部距窗口顶部的距离
element.getBoundingClientRect().top 

//元素底部部距窗口顶部的距离
element.getBoundingClientRect().bottom 

欢迎收藏，点赞。有错误请大家指出，谢谢！