尺寸

元素偏移量offset系列

元素整体区域宽高，包括元素边框border、内边距padding，不包括溢出部分

element.offsetHeight;
element.offsetWidth;

//元素位置：元素左边界到定位父元素左边界距离
element.offsetLeft;
//元素位置：元素顶部边界到定位父元素顶部边界距离
element.offsetTop;

元素可视区client系列

元素内部区域宽高，包含内边距padding，不包括边框border、溢出部分

element.clientHeight;
element.clientWidth;

//元素左边框border-left大小
element.clientLeft;
//元素上边框border-top大小
element.clientTop;

元素滚动scroll系列

元素内容实际宽高，包括溢出部分、伪元素、内边距padding，但不包括边框border

element.scrollHeight
element.scrollWidth

//元素内容左边（卷起来的）到元素视口可见内容（的左边）的距离
element.scrollLeft
//元素内容顶部（卷起来的）到元素视口可见内容（的顶部）的距离
element.scrollTop

//当scrollHeight - scrollTop == clientHeight时，说明垂直滚动条已经滚动到底；
//当scrollWidth - scrollLeft == clientWidth时，说明水平滚动条已经滚动到底；

文档可视区client系列

//不包含滚动条
document.documentElement.clientWidth;
document.documentElement.clientHeight;

文档可视区scroll系列

document.documentElement.scrollLeft;
document.documentElement.scrollTop;

窗口宽高inner系列

// 包括滚动条（如果有的话），但不包括工具栏和滚动条以外的部分。
window.innerWidth;
window.innerHeight;

// 包括所有的界面元素，如窗口边框、工具栏、滚动条和状态栏。
window.outerWidth;
window.outerHeight;

窗口滚动scroll系列

//返回文档水平方向滚动的距离
window.scrollX
window.pageXOffset

//返回文档在垂直方向滚动的距离
window.scrollY
window.pageYOffset

窗口相对于整个屏幕左上角的距离

window.screenX
window.screenLeft

window.screenY
window.screenTop

元素相对于视口左上角的距离

element.getBoundingClientRect();

TIP

标准盒模型：

• 元素宽高等于width/height + padding + border-width；
• x坐标/ top等于元素顶部边界到视口顶部边界的距离，不包括padding、border的值；
• y坐标/ left等于元素左边界到视口左边界的距离，不包括padding、border的值；
• right等于元素右边界到视口左边界的距离，包括padding、border的值；
• bottom等于元素底部边界到视口顶部边界的距离，包括padding、border；

怪异盒模型：

• 元素宽高等于 width/height；
• x坐标/ top等于元素顶部边界到视口顶部边界的距离，不包括padding、border的值；
• y坐标/ left等于元素左边界到视口左边界的距离，不包括padding、border的值；
• right等于元素右边界到视口左边界的距离，不包括padding、border的值；
• bottom等于元素底部边界到视口顶部边界的距离，不包括padding、border；

鼠标相对于视口左上角的距离

x
event.clientX

y
event.clientY

鼠标相对于整个屏幕左上角的距离

event.screenX
event.screenY

鼠标相对于整个文档的距离

event.pageX
event.pageY

鼠标相对于触发事件的元素的边界的距离

event.offsetX
event.offsetY

鼠标相对于上次事件时鼠标的距离

event.movementX
event.movementY