JavaScript中clientWidth,offsetWidth,scrollWidth的区别
作者:guo&qi 发布时间:2024-04-22 22:24:59
标签:JavaScript,clientWidth,offsetWidth,scrollWidth,区别
一、概念
它们都是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


猜你喜欢
- 开始刷leetcode算法题 今天做的是“买卖股票的最佳时机”题目要求 给定一个数组,它的第 i 个元素是一支给定股票第 i 天的价格。设计
- Socket 是进程间通信的一种方式,它与其他进程间通信的一个主要不同是:它能实现不同主机间的进程间通信,我们网络上各种各样的服务大多都是基
- 2. 从函数开始2.1. 定义一个函数如下定义了一个求和函数:def add(x, y): return
- 查询缓存1.查询缓存操作原理mysql执行查询语句之前,把查询语句同查询缓存中的语句进行比较,且是按字节比较,仅完全一致才被认为相同。如下,
- strstr 定义和用法注释:该函数是二进制安全的。语法strstr(string,search,before_search)参数
- asp使用SQL语句,查询数据库中的第10-20条记录的l方法,两种sql语句写法如下:1、select top 10 * from tab
- 实例如下所示:>> A=[1,2,3;4,5,6;7,8,9]A = 1 2 3  
- 你完成了你的品牌新的应用程序,一切工作就像一个魅力。用户来使用你的网络。每个人是幸福的。 然后,突然间,一个大爆发的用户杀死你的MySQL服
- 本文实例为大家分享了vue数据请求拦截的具体代码,供大家参考,具体内容如下在src文件夹下创建utils文件夹同时在文件夹下创建reques
- 代码如下:<script type=text/javascript src=http://fw.qq.com/ipaddress>
- 在做js测试的时候用到了startsWith函数,但是他并不是每个浏览器都有的,所以我们一般要重写一下这个函数,具体的用法可以稍微总结一下在
- 本文实例讲述了js中火星坐标、百度坐标、WGS84坐标转换实现方法。分享给大家供大家参考,具体如下://定义一些常量var x_PI = 3
- 1.简介(torch.nn下的)卷积层主要使用的有3类,用于处理不同维度的数据参数 Parameters:in_channels(int)
- 本机中原pyinstaller版本为3.5版本,本打算通过 pip install --upgrade pyinstaller进行升级,竟然
- 问题描述给出一个整数数组 nums,请返回其中位数为偶数的数字的个数。示例 1:输入:nums = [12,345,2,6,7896]输出:
- 错误出现情景在cmd中使用mysql命令,学生信息表添加数据。使用load data方式简单批量导入数据。准备好文本数据: xuesheng
- #{} 和 ${} 的区别#{} 匹配的是一个占位符,相当于 JDBC 中的一个?,会对一些敏感字符进行过滤,编译过后会对传递的值加上双引号
- 介绍职责链模式(Chain of responsibility)是使多个对象都有机会处理请求,从而避免请求的发送者和接受者之间的耦合关系。将
- 引言您是否能编写命令行工具?也许您可以,但您能编写出真正好用的命令行工具吗?本文讨论使用 Python 来创建一个强健的命令行工具,并带有内
- 选择一个合适的编辑器,比如notepad++、VS、eclipse、sublime text等,选中要集体缩进的代码块,按Tab:集体缩进(