JavaScript中clientWidth,offsetWidth,scrollWidth的区别
作者：guo&qi 时间：2024-04-22 22:24:59
一、概念
它们都是Element的属性，表示元素的宽度：
Element.clientWidth 内容+内边距-滚动条-----不包括边框和外边距 == 可视内容
Element.scrollWidth 内容+内边距+溢出尺寸-----不包括边框和外边距 ==实际内容
Element.offsetWidth 元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件
二、举例
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为：父元素的content宽度-滚动条的宽度（大约为15px）
父元素的clientWidth为：父元素的content宽度+父元素padding宽度-滚动条宽度（大约为15px）
来源：https://www.cnblogs.com/gg-qq/p/14309110.html
标签：JavaScript,clientWidth,offsetWidth,scrollWidth,区别
0
投稿猜你喜欢
Python使用scipy保存图片的一些注意点
2023-12-01 06:06:58
Laravel中间件的使用详解
2023-05-27 10:16:40
Python解析命令行读取参数之argparse模块
2021-12-17 22:15:32
关于获取HTML元素的CSS属性值函数
2008-09-01 13:20:00
使用Keras预训练好的模型进行目标类别预测详解
2023-02-04 09:14:37
Go每日一库之quicktemplate的使用
2023-06-28 01:03:15
PHP获取类中常量，属性，及方法列表的方法
2023-11-19 19:57:58
Python实现为PDF大文件批量去除水印
2023-04-14 19:59:04
SQL Server 2005恢复Master库
2011-05-16 13:11:00
在IE8中继续使用滤镜及IE8的一些CSS扩展属性
2009-02-21 11:18:00
详谈python中subprocess shell=False与shell=True的区别
2021-08-01 02:00:01
如何进行MySQL数据库表的故障检测
2009-02-10 10:34:00
浅谈Python编程中3个常用的数据结构和算法
2022-02-11 20:15:04
python绘制带有色块的折线图
2022-08-11 07:01:58
CSS 超链接图标规范 V1.0
2007-12-28 12:05:00
javascript 文档的编码问题解决
2024-04-22 22:45:22
C#连接db2数据库的实现方法
2024-01-19 07:00:51
python中getaddrinfo()基本用法实例分析
2023-03-15 12:17:34
新手必备的Python实用技巧和工具
2022-08-20 04:59:01
PyTorch实现AlexNet示例
2021-08-31 20:15:44
