window.innerHeight ——浏览器窗口的视口（viewport）高度
window.innerWidth ——浏览器窗口的视口（viewport）宽度
window.outerHeight ——整个浏览器窗口的高度
window.outerWidth——整个浏览器窗口的宽度
window.pageXOffset——表示页面滚动的像素值（水平方向）
window.pageYOffset——表示页面滚动的像素值（垂直方向）
window.scrollY 的别名window.scrollX——返回文档/页面水平方向滚动的像素值window.scrollY——返回文档/页面垂直方向滚动的像素值screen.availWidth——返回浏览器窗口可占用的水平宽度
screen.availHeight——返回浏览器窗口可占用的垂直空间
screen.height //864
screen.availHeight //824
screen.width——返回屏幕的宽度screen.height——返回屏幕的高度document.elementFromPoint()—— 函数返还在特定坐标点下的HTML元素数组 var elements = document.elementsFromPoint(x, y);
Element.getBoundingClientRect()——返回元素的大小及其相对于视口的位置 #box {
background-color: rgb(105, 221, 241);
width: 200px;
height: 200px;
padding: 20px;
border: 10px solid rgb(152, 238, 149);
margin: 20px;
}
console.log(box.getBoundingClientRect());
// {
// x: 20;
// y: 20;
// width: 260;
// height: 260;
// top: 20;
// right: 280;
// bottom: 280;
// left: 20;
// }
element.clientLeft——表示的是一个元素左边框的宽度
element.clientTop——表示的是一个元素顶部边框的宽度
element.clientWidth——表示元素内容区域的宽度
element.clientHeight——表示元素内容区域的高度
element.offsetLeft——表示相对于最近的祖先定位元素的左边界偏移量
offsetTop、offsetLeft、offsetWidth 及 offsetHeight 描述了元素相对于 offsetParent 的边界框element.offsetTop——表示相对于最近的祖先定位元素的顶部边界偏移量element.offsetWidth——返回一个元素的布局宽度
content、padding、border以及竖直方向滚动条element.offsetHeight——返回一个元素的布局高度
element.scrollWidth——表示元素内容的全部宽度
element.scrollHeight——表示元素内容的全部高度
element.scrollLeft——可以读取或设置元素滚动条到元素左边的距离
scrollLeft设置为0时，水平滚动条在最左边element.scrollTop——可以获取或设置一个元素的内容垂直滚动的像素数
scrollTop 值为0element.scrollTo()——可以使界面滚动到给定元素的指定坐标位置
element.scrollTo({
top: 100,
left: 100,
behavior: ‘smooth‘
});
element.scrollBy()——可以使元素滚动一段特定距离MouseEvent.clientX ——鼠标指针相对于内部窗口(viewport)的左偏移量
MouseEvent.clientY ——鼠标指针相对于内部窗口(viewport)的顶部偏移量MouseEvent.offsetX ——鼠标指针相对于目标节点内边位置(padding)的X坐标
border左上角，offsetX为负值的border-left-widthMouseEvent.offsetY ——鼠标指针相对于目标节点内边位置的Y坐标MouseEvent.pageX——鼠标指针相对于整个文档的X坐标
document的坐标，其会随着页面滚动而改变MouseEvent.pageY——鼠标指针相对于整个文档的Y坐标screenX——鼠标指针相对于全局（屏幕）的X坐标screenY——鼠标指针相对于全局（屏幕）的Y坐标MouseEvent.x ——MouseEvent.clientX的别名MouseEvent.y——MouseEvent.clientY的别名MouseEvent.layerX ——其获取的是触发点相对于被点击元素的距离
原文：https://www.cnblogs.com/zengbin13/p/12975296.html