盒子大小及宽高

1、盒子宽高
offsetWidth   offsetHeight   元素总宽高
clientWidth   clientHeight   不包括边框的宽高
scrollWidth   scrollHeight   页面内容(包括滚动出去的)和内边距
2、父盒子
offsetParent  获取最近定位的父元素
3、盒子位置
offsetLeft  offsetTop  元素相对最近定位父元素的坐标
scrollLeft  scrollTop   滚动出去的内容的大小
clientLeft  clientTop   边框的尺寸
注意:获取页面滚动出去的距离,需要监听滚动事件
Window.onscroll=function(){
Var scroll=document.documentElement.scrollTop || 
document.body.scrollTop;
}
$('.hotelDetail').click(function(e) {
    //         console.log(e);
    //         console.log('e.clientY:' + e.clientY);     距离屏幕顶部高度
    //         console.log('e.offsetY:' + e.offsetY);     距离文档顶部高度
    //         console.log('e.pageY:' + e.pageY);      距离页面顶部高度
    //     })
    
**offsetY=pageY**
**e.pageY-clientY=滚动出去的距离=$(window).scrollTop()**

你可能感兴趣的:(盒子大小及宽高)