JavaScript DOM元素尺寸与位置获取：offset、client与scroll系列详解
本文详细解析JavaScript中获取元素尺寸与位置的三大核心系列：offset、client和scroll。通过对比offsetWidth与style.width的区别，以及client系列不包含边框、scroll系列反映实际内容高度的特性，结合代码示例说明各属性的返回值含义及滚动事件的应用场景，帮助开发者精准掌握网页特效开发中的元素测量技巧。
一、元素偏移量 offset 系列
offset 意为偏移量，利用该系列属性可以动态获取元素的位置（偏移）及尺寸大小。
- 用于获取元素相对于带有定位属性父元素的距离。
- 用于获取元素自身的宽度和高度。
- 注意：上述属性返回的数值均不带单位。
offset 系列常用的属性包括：
以下示例设定一个子盒子嵌套在父盒子中，并赋予具体尺寸，演示各属性的获取方式：
<style>
*{
margin: 0px;
padding: 0px;
}
.father{
position: relative;
margin-left: 50px;
margin-top: 10px;
width: 200px;
height: 200px;
background-color: brown;
}
.son{
width: 100px;
height: 100px;
background-color: cornflowerblue;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
var father = document.querySelector('.father');
var son = document.querySelector('.son')
console.log('father.offsetLeft',father.offsetLeft);
console.log('father.offsetTop',father.offsetTop);
console.log('son.offsetWidth',son.offsetWidth);
console.log('son.offsetHeight',son.offsetHeight);
</script>
</body>
控制台打印结果如下：
虽然 style 属性也能获取部分相关属性，但 offset 与 style 存在显著差异，具体对比如下：
offset
- offset 能够获取任意样式表（包括外部CSS）中定义的样式值。
- offset 系列返回的数值均为纯数字，不包含单位。
- offsetWidth 的计算包含 width、padding 和 border 的总和。
- offsetWidth 等属性为只读属性，仅支持读取，不支持赋值操作。
style
- style.width 返回的是带有单位的字符串（如 '100px'）。
- style.width 仅获取 width 的值，不包含 padding 和 border。
- style.width 是可读写属性，既可用于获取也可用于赋值。
二、元素可视区 client 系列
client 意为客户端，利用该系列属性可动态获取元素可视区域的相关信息，包括边框大小及元素尺寸。
以下示例展示一个带有边框的盒子，并输出相关属性值：
<style>
.box{
width: 200px;
height: 200px;
background-color: darkorchid;
border: 20px solid #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box')
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientWidth:'+box.clientWidth);
console.log('box.clientTop:'+box.clientTop);
</script>
运行结果如下：
观察结果可知，通过 client 系列获取的盒子尺寸不包含边框宽度。
三、元素滚动 scroll 系列
scroll 意为滚动，利用该系列属性可动态获取元素的大小及滚动距离等信息。
沿用上述案例盒子，打印其 scroll 系列属性以观察结果：
<style>
.box{
width: 200px;
height: 200px;
background-color: darkorchid;
border: 20px solid #ccc;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box')
console.log('box.scrollWidth:'+box.scrollWidth);
console.log('box.scrollHeight:'+box.scrollHeight);
console.log('box.scrollLeft:'+box.scrollLeft);
console.log('box.scrollTop:'+box.scrollTop);
</script>
运行结果如下：
此时获取的盒子宽高与给定值一致，且与 client 系列结果相同。二者的区别在于：当盒子内容超出容器高度时，表现不同。我们在盒内添加超过容器高度的内容：
<div class="box">
王欢在学前端<br><br>
王欢在学前端<br><br>
王欢在学前端<br><br>
王欢在学前端<br><br>
王欢在学前端<br><br>
王欢在学前端<br><br>
王欢在学前端
</div>
打印结果如下：
结果显示盒子高度增加，该值代表包含文字内容后的实际高度。
此外，两次打印的 box.scrollLeft 和 box.scrollTop 均为 0，这表示当前未发生滚动。
通过设置 overflow: auto 使超出内容显示滚动条，并添加滚动事件监听器，代码如下：
var box = document.querySelector('.box')
box.addEventListener('scroll',function(){
console.log('box.scrollTop:'+box.scrollTop);
})
页面效果如下：
滚动时数值随之变化。box.scrollTop 返回的是被卷去的上侧距离，具体示意如下：
以上为 JavaScript 实现三种常用网页特效（offset、client、scroll 系列）的详细内容，更多关于 JavaScript 网页特效的资料请关注本站其它相关文章！
js-cookie 安装与基础用法：set、get、remove 详解
2026-11-05 16:35:06
适合JavaScript初学者的实战项目：制作简易待办事项列表
2026-11-05 16:17:07
JS打开新标签页时怎么通过URL传递参数
2026-11-05 12:21:08
sigma.js 自定义节点样式：设置颜色、大小及标签显示的技巧
2026-11-05 09:55:00
JS 生成的统计图怎么导出为 PNG 图片或 PDF 文件？
2026-11-05 09:37:58