前端：常用的获取元素位置与元素尺寸的属性与方法
| 属性/方法 | 描述 |
|---|---|
clientWidth | 返回元素内容区的宽度（不包括滚动条、边框和外边距）。对于box-sizing: border-box的元素，包含内边距。 |
clientHeight | 返回元素内容区的高度（不包括滚动条、边框和外边距）。对于box-sizing: border-box的元素，包含内边距。 |
offsetWidth | 返回元素的总宽度，包括内边距和边框，但不包括外边距。 |
offsetHeight | 返回元素的总高度，包括内边距和边框，但不包括外边距。 |
scrollWidth | 返回元素的完整内容宽度，包括可能超出视口需要滚动才能看见的部分。 |
scrollHeight | 返回元素的完整内容高度，包括可能超出视口需要滚动才能看见的部分。 |
offsetLeft | 返回元素左边缘到其最近定位父元素左边缘的距离，包括元素的margin。 |
offsetTop | 返回元素顶部到其最近定位父元素顶部的距离，包括元素的margin。 |
getBoundingClientRect() | 返回一个对象，包含元素各边界相对于视口的位置（top, right, bottom, left)以及元素的宽高（width, height），考虑了滚动、变形和CSS转换的影响。 |
scrollTop | 返回元素自身的垂直滚动条位置。 |
scrollLeft | 返回元素自身的水平滚动条位置。 |
window.innerWidth | 返回浏览器视口内部的宽度，包括滚动条（但滚动条不计入宽度内）。 |
window.innerHeight | 返回浏览器视口内部的高度，包括滚动条（但滚动条不计入高度内）。 |
window.scrollY | 返回当前视口距离页面顶部的垂直滚动偏移量。等同于window.pageYOffset。 |
window.scrollX | 返回当前视口距离页面左侧的水平滚动偏移量。等同于window.pageXOffset。 |
window.screen.width | 返回浏览器窗口所在的整个屏幕的宽度。 |
window.screen.height | 返回浏览器窗口所在的整个屏幕的高度。 |
document.documentElement.clientWidth | 返回HTML文档元素在视口内的可视宽度，不包括滚动条。 |
document.documentElement.clientHeight | 返回HTML文档元素在视口内的可视高度，不包括滚动条 |
下面有一个简单的示例：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>啦啦啦</title></head><body><div id="example" class="hidden-scrollbar"></div></body><script>const getDomInfos = () => {var exampleDiv = document.getElementById("example");//元素的内容区域宽度和高度console.log("clientWidth:", exampleDiv.clientWidth);console.log("clientHeight:", exampleDiv.clientHeight);//元素的内边距区域宽度和高度console.log("offsetWidth:", exampleDiv.offsetWidth);console.log("offsetHeight:", exampleDiv.offsetHeight);//元素的滚动区域宽度和高度console.log("scrollWidth:", exampleDiv.scrollWidth);console.log("scrollHeight:", exampleDiv.scrollHeight);//元素与父元素的距离console.log("offsetLeft:", exampleDiv.offsetLeft);console.log("offsetTop:", exampleDiv.offsetTop);//元素的边界矩形，值为一个 DOMRect 对象，具体为bottom, height, left, right, top, width, x, yconsole.log("getBoundingClientRect():",exampleDiv.getBoundingClientRect());//元素的滚动距离console.log("scrollTop:", exampleDiv.scrollTop);console.log("scrollLeft:", exampleDiv.scrollLeft);//视口的宽度和高度console.log("window.innerWidth:", window.innerWidth);console.log("window.innerHeight:", window.innerHeight);//滚动条的滚动距离console.log("window.scrollY:", window.scrollY);console.log("window.scrollX:", window.scrollX);//屏幕的宽度和高度console.log("window.screen.width:", window.screen.width);console.log("window.screen.height:", window.screen.height);//文档的宽度和高度console.log("document.documentElement.clientWidth:",document.documentElement.clientWidth);console.log("document.documentElement.clientHeight:",document.documentElement.clientHeight);};window.addEventListener("DOMContentLoaded", getDomInfos);</script><style>#example {position: relative; /* 设置为相对定位，方便观察offset属性 */width: 300px;height: 200px;padding: 20px;border: 5px solid black;box-sizing: border-box;overflow: auto;background-color: lightblue;}.hidden-scrollbar {/* 为了演示innerWidth和outerWidth的区别 */scrollbar-width: none; /* Firefox */-ms-overflow-style: none; /* Internet Explorer 10+ */overflow-x: hidden; /* 隐藏水平滚动条 */}</style>
</html>