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 相关文章推荐
用js实现计算加载页面所用的时间
Apr 02 Javascript
JavaScript高级程序设计 读书笔记之九 本地对象Array
Feb 27 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
理解javascript中Map代替循环
Feb 26 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
javascript使用递归算法求两个数字组合功能示例
Jan 03 Javascript
js自制图片放大镜功能
Jan 24 Javascript
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
JavaScript实现轮播图特效
Apr 10 Javascript
Javascript实现单选框效果
Dec 09 Javascript
Vue的过滤器你真了解吗
Feb 24 Vue.js
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
编辑浪子版表单验证类
2007/05/12 Javascript
用js生产批量批处理执行命令
2008/07/28 Javascript
jquery miniui 教程 表格控件 合并单元格应用
2012/11/25 Javascript
原生Js页面滚动延迟加载图片实现原理及过程
2013/06/24 Javascript
js中的replace方法使用介绍
2013/10/28 Javascript
js和jquery中循环的退出和继续学习记录
2014/09/06 Javascript
javascript检测是否联网的实现代码
2014/09/28 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
跟我学习javascript的for循环和for...in循环
2015/11/18 Javascript
javascript闭包(Closure)用法实例简析
2015/11/30 Javascript
简单介绍JavaScript数据类型之隐式类型转换
2015/12/28 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
2016/05/11 Javascript
JQuery控制图片由中心点逐渐放大效果
2016/06/26 Javascript
使用JavaScript判断用户输入的是否为正整数(两种方法)
2017/02/05 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
ant-design-vue 实现表格内部字段验证功能
2019/12/16 Javascript
python实现数通设备端口监控示例
2014/04/02 Python
python+mongodb数据抓取详细介绍
2017/10/25 Python
Python使用PIL模块生成随机验证码
2017/11/21 Python
简单的python协同过滤程序实例代码
2018/01/31 Python
对python3标准库httpclient的使用详解
2018/12/18 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
keras 解决加载lstm+crf模型出错的问题
2020/06/10 Python
Keras实现DenseNet结构操作
2020/07/06 Python
Sentry错误日志监控使用方法解析
2020/11/12 Python
HTML5 LocalStorage 本地存储刷新值还在
2017/03/10 HTML / CSS
中文专业毕业生自荐信
2013/10/28 职场文书
欢送会主持词
2015/07/01 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
Python基于百度AI实现抓取表情包
2021/06/27 Python
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python