JavaScript中clientWidth,offsetWidth,scrollWidth的区别


Posted in Javascript onJanuary 25, 2021

一、概念

它们都是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)

以上就是Element中clientWidth,offsetWidth,scrollWidth的区别的详细内容,更多关于clientWidth,offsetWidth,scrollWidth的区别的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
JavaScript ParseFloat()方法
Dec 18 Javascript
jQuery实现日期联动效果实例
Jul 26 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
基于jquery二维码生成插件qrcode
Jan 07 Javascript
js时间戳格式化成日期格式的多种方法介绍
Feb 16 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
vue.js单页面应用实例的简单实现
Apr 10 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
May 17 jQuery
Node.JS利用PhantomJs抓取网页入门教程
May 19 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
Apr 26 jQuery
Javascript实现异步编程的过程
Jun 18 Javascript
vue keep-alive的简单总结
Jan 25 #Vue.js
JS实现简易日历效果
Jan 25 #Javascript
javascript代码实现简易计算器
Jan 25 #Javascript
js简单粗暴的发布订阅示例代码
Jan 23 #Javascript
JS中循环遍历数组的四种方式总结
Jan 23 #Javascript
vue form表单post请求结合Servlet实现文件上传功能
Jan 22 #Vue.js
原生js实现自定义难度的扫雷游戏
Jan 22 #Javascript
You might like
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
qq悬浮代码(兼容各个浏览器)
2014/01/29 Javascript
用JS实现轮播图效果(二)
2016/06/26 Javascript
JS获取字符串实际长度(包含汉字)的简单方法
2016/08/11 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
node.js利用socket.io实现多人在线匹配联机五子棋
2018/05/31 Javascript
在vue+element ui框架里实现lodash的debounce防抖
2019/11/13 Javascript
Javascript组合继承方法代码实例解析
2020/04/02 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[01:04:22]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 IG vs EG
2018/04/01 DOTA
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
简单谈谈python中的语句和语法
2017/08/10 Python
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Django视图和URL配置详解
2018/01/31 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
使用python将大量数据导出到Excel中的小技巧分享
2018/06/14 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
Python学习笔记之迭代器和生成器用法实例详解
2019/08/08 Python
使用OpCode绕过Python沙箱的方法详解
2019/09/03 Python
tensorflow指定CPU与GPU运算的方法实现
2020/04/21 Python
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
2018/01/10 HTML / CSS
英国二手iPhone、音乐、电影和游戏商店:musicMagpie
2018/10/26 全球购物
旅游管理毕业生自荐信
2013/11/05 职场文书
化工专业个人的求职信范文
2013/11/28 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
法律专业实习鉴定
2013/12/22 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
教师考核材料
2014/05/21 职场文书
计算机网络及管理学专业求职信
2014/06/05 职场文书
公司停电通知
2015/04/15 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
python 实现mysql自动增删分区的方法
2021/04/01 Python
在HTML5 localStorage中存储对象的示例代码
2021/04/21 Javascript
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android