JavaScript中的offsetWidth、clientWidth、scrollWidth等一系列属性详解
作者：小前端大牛马
在JavaScript编程中,offsetWidth是一种用于获取元素宽度的属性,下面这篇文章主要介绍了JavaScript中的offsetWidth、clientWidth、scrollWidth等一系列属性的相关资料,需要的朋友可以参考下
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: ...">）。
使用条件
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>或视口）。
总结
到此这篇关于JavaScript中的offsetWidth、clientWidth、scrollWidth等一系列属性详解的文章就介绍到这了,更多相关js中offsetWidth、clientWidth、scrollWidth内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！