offset、client、scroll (width,height、left,top、X,Y)

offsetWidth、clientWidth、scrollWidth

div{
    width: 20px;
    height: 20px;
    padding: 10px;
    border: 5px solid #000080;
}

<script type="text/javascript">
   var div = document.querySelector("div");
   console.log(div.offsetWidth);
   console.log(div.clientWidth);
   console.log(div.scrollWidth);
  </script>

                                          
offsetWidth： 元素的宽度(width+左右padding+左右border)
clientWidth： 元素内尺寸(width+左右padding)
scrollWidth： 实际宽度，包括已经超出盒子的内容的宽度
获取文档区宽度，高度：(body标签的宽高,不包括滚动条)
document.documentElement.scrollWidth
document.documentElement.scrollHeight

offsetTop： 元素相对于上一个具有定位属性的父级元素的距离
clientTop： 元素上边框的高度
scrollTop： 元素滚动条的高度(元素超出可视区域的内容高度)
获取浏览器的滚动条高度： document.documentElement.scrollTop

window对象属性：
window.innerWidth     浏览器文档区+滚动条宽度
window.innerHeight     浏览器文档区+滚动条高度
window.outerWidth      整个浏览器宽度
window.outerHeight     整个浏览器高度
window.screen.width     屏幕宽度(分辨率)
window.screen.height     屏幕高度(分辨率)

鼠标事件对象属性
ev.screenX      鼠标相对于屏幕左侧的距离
ev.clientX      鼠标相对于浏览器左侧的距离
ev.offsetX || ev.layerX      鼠标相对于事件源左侧的距离

本文地址：https://blog.csdn.net/weixin_42043532/article/details/107510099