JavaScript中clientWidth、offsetWidth与scrollWidth的区别详解
本文详细解析JavaScript中Element对象的clientWidth、offsetWidth和scrollWidth属性。clientWidth包含内容与内边距并减去滚动条；scrollWidth涵盖内容、内边距及溢出部分；offsetWidth则计算整体宽度，包含边框与滚动条。通过横向及双向滚动条场景示例，明确各属性在不同布局下的具体表现与计算方式。
一、概念
这三个属性均属于Element对象，用于获取元素的宽度信息：
Element.clientWidth 表示可视内容区域，其值为内容宽度加上内边距（padding），需减去滚动条的宽度，不包含边框（border）和外边距（margin）。 Element.scrollWidth 表示实际内容宽度，其值为内容宽度加上内边距（padding）以及溢出部分的尺寸，不包含边框（border）和外边距（margin）。 Element.offsetWidth 表示元素的整体宽度，其值为内容宽度加上内边距（padding）、边框（border）以及滚动条的宽度。
二、举例
1、仅有横向滚动条的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试scrollWidth、clientWidth、offsetWidth</title>
<style type="text/css">
body, html {
margin: 0px;
padding: 0px;
}
#father {
width: 300px;
overflow: auto;
padding: 10px;
background: rebeccapurple;
border: 10px solid red;
margin: 20px;
}
#child {
height: 100px;
width: 1000px;
padding: 10px;
border: 20px solid #ffcc99;
margin: 30px;
}
</style>
</head>
<body>
<div id="father">
<div id="child"></div>
</div>
<script type="text/javascript">
var child = document.getElementById("child");
console.log("child.width:", window.getComputedStyle(child).width); //内容的宽度：1000px
console.log("child.clientWidth:", child.clientWidth); //内容+内边距-滚动条-----不包括边框和外边距 == 可视内容 1020px
console.log("child.scrollWidth:", child.scrollWidth); //内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容 1020px
console.log("child.offsetWidth:", child.offsetWidth); //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件 1060px
var father = document.getElementById("father");
console.log("father.width:", window.getComputedStyle(father).width); //内容的宽度：300px
console.log("father.clientWidth:", father.clientWidth); //内容+内边距-滚动条-----不包括边框和外边距 == 可视内容 320px
console.log("father.scrollWidth:", father.scrollWidth); //内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容 1100px
console.log("father.offsetWidth:", father.offsetWidth); //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件 340px
</script>
</body>
</html>当仅存在横向滚动条时，父元素的宽度会受子元素影响，其中scrollWidth的计算较为特殊。
此时，父元素的scrollWidth计算方式为：子元素的内容宽度（content）加上子元素的内边距（padding）、子元素的边框（border）、子元素一侧的外边距（margin）以及父元素一侧的内边距（padding）。
2、有横向滚动条和竖向滚动条的情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试scrollWidth、clientWidth、offsetWidth</title>
<style type="text/css">
body, html {
margin: 0px;
padding: 0px;
}
#father {
height: 50px;
width: 300px;
overflow: auto;
padding: 10px;
background: rebeccapurple;
border: 10px solid red;
margin: 20px;
}
#child {
height: 100px;
width: 1000px;
padding: 10px;
border: 20px solid #ffcc99;
margin: 30px;
}
</style>
</head>
<body>
<div id="father">
<div id="child"></div>
</div>
<script type="text/javascript">
var child = document.getElementById("child");
console.log("child.width:", window.getComputedStyle(child).width); //内容的宽度：1000px
console.log("child.clientWidth:", child.clientWidth); //内容+内边距-滚动条-----不包括边框和外边距 == 可视内容 1020px
console.log("child.scrollWidth:", child.scrollWidth); //内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容 1020px
console.log("child.offsetWidth:", child.offsetWidth); //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件 1060px
var father = document.getElementById("father");
console.log("father.width:", window.getComputedStyle(father).width); //内容的宽度：285px
console.log("father.clientWidth:", father.clientWidth); //内容+内边距-滚动条-----不包括边框和外边距 == 可视内容 305px
console.log("father.scrollWidth:", father.scrollWidth); //内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容 1100px
console.log("father.offsetWidth:", father.offsetWidth); //元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件 340px
</script>
</body>
</html>在此场景下，父元素的width计算方式为：父元素的内容宽度减去滚动条的宽度（通常约为15px）。
父元素的clientWidth计算方式为：父元素的内容宽度加上父元素的内边距（padding）宽度，再减去滚动条的宽度（通常约为15px）。
以上即为Element中clientWidth、offsetWidth与scrollWidth区别的详细解析，如需了解更多相关信息，请持续关注本站其他文章。
JS在setTimeout或Ajax回调中打开新标签页失败怎么处理
2026-11-05 15:50:12
JS直播协议选型：HLS、FLV与WebRTC的延迟与兼容性对比
2026-11-05 12:16:14
JS实现回到顶部：scrollTop赋值与浏览器兼容性处理
2026-11-04 23:43:35
JS使用classList动态添加、移除和切换CSS类名
2026-11-04 23:40:58
在 D3.js 中实现平滑过渡动画的技巧
2026-11-03 23:46:09