js各种高度的获取

js各种高度示意图

距离父元素顶部的距离

1
2
3
4
5
// js
ele.offsetTop;

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

网页被卷起来的高度

1
2
3
4
5
6
// js
document.documentElement.scrollTop || document.body.scrollTop
window.pageYOffset

// jq
$(window).scrollTop()

元素的高度/宽度

1
2
3
4
5
// js
document.querySelector('.eleClass').clientHeight;

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

窗口的高度

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

getBoundingClientRect

1
2
3
4
5
//元素顶部距窗口顶部的距离
element.getBoundingClientRect().top 

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