一.js中的offsetWidth、clientWidth、scrollWidth等一系列属性详解
决定盒子大小的元素有：
- 内容区域（content）的宽度/高度
- 内边距（padding）
- 边框（border）
- 外边距（margin）
- 垂直滚动条
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）。
- 可读可写，可以通过设置它们的值来控制滚动位置。
<div id="container" style="height: 200px; overflow: auto;">
<!-- 内容高度为 500px -->
</div>
//当滚动到中间时，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-widthclientLeft：元素 左侧边框（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对象，直接操作元素的 行内样式（<element style="left: ...">）。
2. 使用条件
left 属性 仅对以下定位模式的元素生效：
position: absoluteposition: relativeposition: fixedposition: sticky
若元素的 position 为 static（默认值），则 left 属性无效。
// 将元素左侧定位到距离包含块左侧 100px 的位置
el.style.left = "100px";
// 使用百分比（例如：左侧距离包含块的 50%）
el.style.left = "50%";
- 如果通过 类名或外部样式表 定义了
left，直接操作el.style.left会覆盖行内样式。 - 若需动态调整优先级，可考虑通过
getComputedStyle获取当前值后再修改。 - 元素的定位是相对于 最近的定位祖先（
position: relative/absolute/fixed/sticky的父元素）。 - 若无定位祖先，则相对于初始包含块（
<html>或视口）。
扫一扫
215
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
