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 相关文章推荐
Microsoft Ajax Minifier 压缩javascript的方法
Mar 05 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
Iframe实现跨浏览器自适应高度解决方法
Sep 02 Javascript
javascript合并表格单元格实例代码
Jan 03 Javascript
浅谈js中的in-for循环
Jun 28 Javascript
arcgis for js 修改infowindow样式的方法
Nov 02 Javascript
jQuery 遍历map()方法详解
Nov 04 Javascript
浅析JavaScript动画模拟拖拽原理
Dec 09 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
js实现同一个页面,多个enter事件绑定的示例
Oct 10 Javascript
jQuery控制input只能输入数字和两位小数的方法
May 16 jQuery
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的字符串用法小结
2010/06/08 PHP
Codeigniter出现错误提示Error with CACHE directory的解决方案
2014/06/12 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
laravel实现上传图片,并且制作缩略图,按照日期存放的代码
2019/10/16 PHP
Javascript 页面模板化很多人没有使用过的方法
2012/06/05 Javascript
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
js获取电脑分辨率的思路及操作
2013/11/22 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
jQuery简单实现图片预加载
2015/04/20 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
javascript replace()第二个参数为函数时的参数用法
2016/12/26 Javascript
使用Angular CLI生成 Angular 5项目教程详解
2018/03/18 Javascript
微信小程序之判断页面滚动方向的示例代码
2018/08/30 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
Vue中img的src是动态渲染时不显示的解决
2019/11/14 Javascript
Nuxt配置Element-UI按需引入的操作方法
2020/07/06 Javascript
vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
2020/08/28 Javascript
[02:38]2018DOTA2亚洲邀请赛赛前采访-VGJ.T
2018/04/03 DOTA
[51:06]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第二场 1月26日
2021/03/11 DOTA
Python中的魔法方法深入理解
2014/07/09 Python
python3.6的venv模块使用详解
2018/08/01 Python
详解Numpy数组转置的三种方法T、transpose、swapaxes
2019/05/27 Python
使用python将多个excel文件合并到同一个文件的方法
2019/07/09 Python
python实现用户名密码校验
2020/03/18 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
阿迪达斯印尼官方网站:adidas印尼
2020/02/10 全球购物
优秀的教师个人的中文求职信
2013/09/21 职场文书
开水果连锁店创业计划书
2013/12/29 职场文书
妇联领导班子剖析材料
2014/08/21 职场文书
上班迟到检讨书范文
2015/05/06 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
Ajax 的初步实现(使用vscode+node.js+express框架)
2021/06/18 Javascript
VS2019连接MySQL数据库的过程及常见问题总结
2021/11/27 MySQL
JavaScript实现一键复制内容剪贴板
2022/07/23 Javascript