clientWidth scrollWidth offsetWidth 傻傻分不清楚

一、Element.clientWidth

clientWidth属性返回元素的内部宽度，单位为像素。它涵盖了元素的内边距（padding），但不包含边框（border）、外边距（margin）以及滚动条（若存在）。

clientWidth = 内容宽度 + 左侧内边距 + 右侧内边距

假设有一个<div>元素，其 CSS 样式如下：

css

div {
	width: 200px;
	padding: 20px;
	border: 10px solid black;
	margin: 15px;
}

html

<div id="myDiv">示例文本</div>

使用 TypeScript 获取其clientWidth：

typescript

const myDiv = document.getElementById('myDiv');
console.log(myDiv.clientWidth); 
// 输出：240 (200 + 20 + 20)

scrollWidth属性返回元素的完整宽度，包括因溢出而在屏幕上不可见的部分。它包含元素的内边距（padding），但不包括边框（border）和外边距（margin）。

scrollWidth = 内容实际宽度（含溢出部分） + 左侧内边距 + 右侧内边距

若上述<div>元素中的文本很长，导致出现水平滚动条：

html

<div id="myDiv">这是一段很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长的文本</div>

使用 TypeScript 获取其scrollWidth：

typescript

const myDiv = document.getElementById('myDiv');
console.log(myDiv.scrollWidth); 
// 输出：文本实际宽度 + 40 (20 + 20)

offsetWidth属性返回元素的布局宽度。它包括元素的边框（border）、内边距（padding）以及水平滚动条（若存在），但不包含外边距（margin）。

offsetWidth = clientWidth + 左侧边框宽度 + 右侧边框宽度

继续使用上述<div>元素，使用 TypeScript 获取其offsetWidth：

typescript

const myDiv = document.getElementById('myDiv');
console.log(myDiv.offsetWidth); 
// 输出：260 (200 + 20 + 20 + 10 + 10)

与clientWidth类似，clientHeight返回元素的内部高度，包含内边距（padding），但不包括边框（border）、外边距（margin）和滚动条（若存在）。
clientHeight = 内容高度 + 顶部内边距 + 底部内边距

与scrollWidth类似，scrollHeight返回元素的完整高度，包括因溢出而在屏幕上不可见的部分，包含内边距（padding），但不包括边框（border）和外边距（margin）。
scrollHeight = 内容实际高度（含溢出部分） + 顶部内边距 + 底部内边距

与offsetWidth类似，offsetHeight返回元素的布局高度，包括元素的边框（border）、内边距（padding）和垂直滚动条（若存在），但不包含外边距（margin）。
offsetHeight = clientHeight + 顶部边框宽度 + 底部边框宽度

理解这些属性之间的差异，有助于在前端开发中更精确地获取和操作 DOM 元素的尺寸信息，以满足诸如布局调整、响应式设计等各种开发需求。