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 相关文章推荐
jQuery 扩展对input的一些操作方法
Oct 30 Javascript
JavaScript面向对象程序设计三 原型模式(上)
Dec 21 Javascript
javascript函数以及基础写法100多条实用整理
Jan 13 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
js电话号码验证方法
Sep 28 Javascript
AngularJS在IE下取数据总是缓存问题的解决方法
Aug 05 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
vue2实现数据请求显示loading图
Nov 28 Javascript
浅谈vue-cli 3.0.x 初体验
Apr 11 Javascript
JavaScript惰性求值的一种实现方法示例
Jan 11 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
将RGB值转换为灰度值的简单算法
Oct 09 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查询域名状态whois的类
2006/11/25 PHP
IIS6的PHP最佳配置方法
2007/03/19 PHP
php session处理的定制
2009/03/16 PHP
Windows PHP5和Apache的安装与配置
2009/06/08 PHP
PHP数据集构建JSON格式及新数组的方法
2012/11/07 PHP
ThinkPHP做文字水印时提示call an undefined function exif_imagetype()解决方法
2014/10/30 PHP
将FCKeditor导入PHP+SMARTY的实现方法
2015/01/15 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
PHP判断数组是否为空的常用方法(五种方法)
2017/02/08 PHP
javascript YUI 读码日记之 YAHOO.util.Dom - Part.4
2008/03/22 Javascript
ExtJs之带图片的下拉列表框插件
2010/03/04 Javascript
JavaScript文本框脚本编写的注意事项
2016/01/25 Javascript
JavaScript中的splice方法用法详解
2016/07/20 Javascript
微信小程序进行微信支付的步骤昂述
2016/12/01 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
8 个有用的JS技巧(推荐)
2019/07/03 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[57:38]2018DOTA2亚洲邀请赛3月30日 小组赛A组 OpTic VS OG
2018/03/31 DOTA
Python编程之event对象的用法实例分析
2017/03/23 Python
Python字符串格式化的方法(两种)
2017/09/19 Python
django query模块
2019/04/20 Python
python实现名片管理系统项目
2019/04/26 Python
python3图片文件批量重命名处理
2019/10/31 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
Pytorch释放显存占用方式
2020/01/13 Python
Python3自定义http/https请求拦截mitmproxy脚本实例
2020/05/11 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
C++面试题目
2013/06/25 面试题
JSF的标签库有哪些
2012/04/27 面试题
写给保洁员表扬信
2014/01/08 职场文书
环保宣传标语
2014/06/12 职场文书
2015公务员年度考核评语
2015/03/25 职场文书
运动会广播稿300字
2015/08/19 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书