目录
1. clientWidth 和 clientHeight(静态（只读）)
2. scrollWidth 和 scrollHeight(静态（只读）)
3. offsetWidth 和 offsetHeight(静态（只读）)
4.scrollTop、scrollLef
定义
5.offsetTop 和 offsetLeft
定义
计算方式
7. clientTop 和 clientLeft
定义
计算方式
8. event.clientX、event.clientY、event.pageX、event.pageY
1. 定义与区别
clientX 和 clientY
pageX 和 pageY
9.于 innerWidth 、 innerHeight
定义
所属对象
计算方式
示例
10.el.style.left
使用条件
总结
1. clientWidth 和 clientHeight(静态（只读）)
定义
：
clientWidth
和
clientHeight
是元素的
可视区域宽度
和
高度
，包括元素的内边距（padding），但
不包括边框、滚动条
。
clientWidth = contentWidth + padding-left + padding-right
clientHeight = contentHeight + padding-top + padding-bottom
应用场景
：
用于获取元素的可视区域大小，常用于布局调整或判断内容是否溢出。
2. scrollWidth 和 scrollHeight(静态（只读）)
定义
：
scrollWidth
和
scrollHeight
是元素内容的
实际宽度
和
高度
，即使内容被截断，也会返回完整内容的尺寸。
scrollWidth = 内容的实际宽度（包括溢出部分）
scrollHeight = 内容的实际高度（包括溢出部分）
应用场景
：
判断元素内容是否溢出（例如：
scrollWidth > clientWidth
表示水平溢出）。
计算滚动条的宽度或高度。
3. offsetWidth 和 offsetHeight(静态（只读）)
定义
：
offsetWidth
和
offsetHeight
是元素的
总宽度
和
总高度
，包括边框、内边距以及滚动条。
offsetWidth = clientWidth + border-left + border-right + 水平滚动条宽度（如果存在）
offsetHeight = clientHeight + border-top + border-bottom + 垂直滚动条高度（如果存在）
应用场景
：
获取元素的总布局尺寸，常用于计算元素在页面中的位置或大小。
4.scrollTop、scrollLef
定义
scrollTop
：表示元素或文档的
垂直滚动位置
，即滚动容器的顶部到可视区域顶部的距离。
scrollLeft
：表示元素或文档的
水平滚动位置
，即滚动容器的左侧到可视区域左侧的距离。
值均为为
非负整数
，单位为像素（px）。
可读可写
，可以通过设置它们的值来控制滚动位置。
//当滚动到中间时，container.scrollTop ≈ 150px。
//当滚动到底部时，container.scrollTop = container.scrollHeight - container.clientHeight。
5.offsetTop 和 offsetLeft
定义
offsetTop
：元素
顶部到其包含块顶部的距离
。
offsetLeft
：元素
左侧到其包含块左侧的距离
。
包含块
是最近的定位祖先元素（
position: relative/absolute/fixed
），若没有则为初始包含块（
body
或
html
）。
div {
position: relative;
margin-top: 20px;
padding: 10px;
border: 5px solid black;
}
//offsetTop = 20px（仅包含 margin-top）。
//元素内容区域的顶部距离包含块顶部的总距离为：
//offsetTop（20px） + border-top（5px） + padding-top（10px） = 35px。
计算方式
值为整数
，单位为像素（px）。
包含元素的
margin
，但 不包含
border
和
padding
。
7. clientTop 和 clientLeft
定义
clientTop
：元素
顶部边框（border-top）的宽度
。clientTop = border-top-width
clientLeft
：元素
左侧边框（border-left）的宽度
。clientLeft = border-left-width
这两个属性
仅返回边框的宽度
，与元素的
border-style
和
border-width
直接相关。
计算方式
值为整数
，单位为像素（px）。
仅包含边框的宽度
，不涉及
padding
或
margin
。
8. event.clientX、event.clientY、event.pageX、event.pageY
1. 定义与区别
clientX 和 clientY
定义
：
表示鼠标指针相对于
浏览器视口（viewport）
的坐标。
clientX
：水平方向（从视口左侧边缘到鼠标位置的距离）。
clientY
：垂直方向（从视口顶部边缘到鼠标位置的距离）。
特点
：
不包含滚动偏移
，始终基于当前可视区域。
例如，即使页面滚动，
clientY
的值也不会变化。
pageX 和 pageY
定义
：
表示鼠标指针相对于
整个文档（document）
的坐标。
pageX
：水平方向（从文档左侧边缘到鼠标位置的距离）。
pageY
：垂直方向（从文档顶部边缘到鼠标位置的距离）。
特点
：
包含滚动偏移
，即滚动条的偏移量会反映在坐标中。
例如，如果页面滚动了
100px
，
pageY
的值会比
clientY
多
100px
。
9.于 innerWidth 、 innerHeight
定义
innerWidth
：返回浏览器
视口（viewport）的宽度
，即用户可见区域的宽度（不包括浏览器工具栏和滚动条）。
innerHeight
：返回浏览器
视口（viewport）的高度
，即用户可见区域的高度（不包括浏览器工具栏和滚动条）。
所属对象
这些属性属于
window
对象，且为只读属性。
计算方式
值为整数
，单位为像素（px）。
不包含：
浏览器工具栏（如地址栏、书签栏）。
页面的滚动条（仅指垂直滚动条对宽度的影响）。
包含：
用户可见的页面内容区域。
示例
假设浏览器窗口尺寸为：
宽度：1280px（包括工具栏），但视口宽度为 1200px。
高度：720px（包括工具栏），但视口高度为 650px。
则：
console.log(window.innerWidth); // 1200
console.log(window.innerHeight); // 650
与
outerWidth
和
outerHeight
的区别
outerWidth
：包含浏览器边框、工具栏和滚动条的总宽度。（现代浏览器中可能与
innerWidth
值相同，因工具栏常隐藏）
outerHeight
：包含浏览器边框、工具栏和滚动条的总高度。
10.el.style.left
el.style.left
是 JavaScript 中用于 设置或获取元素
left
样式属性 的属性。
作用
：
控制元素
水平方向的位置
，即元素左侧边缘距离其
包含块（containing block）
左侧的距离。
值的格式
：
必须包含单位（如
px
、
%
、
vw
等），例如
'100px'
或
'50%'
。
所属对象
：
属于
el.style
对象，直接操作元素的
行内样式
（
left
属性
仅对以下定位模式的元素生效
：
position: absolute
position: relative
position: fixed
position: sticky
若元素的
position
为
static
（默认值），则
left
属性无效。
// 将元素左侧定位到距离包含块左侧 100px 的位置
el.style.left = "100px";
// 使用百分比（例如：左侧距离包含块的 50%）
el.style.left = "50%";
如果通过
类名或外部样式表
定义了
left
，直接操作
el.style.left
会覆盖行内样式。
若需动态调整优先级，可考虑通过
getComputedStyle
获取当前值后再修改。
元素的定位是相对于
最近的定位祖先
（
position: relative/absolute/fixed/sticky
的父元素）。
若无定位祖先，则相对于初始包含块（