JavaScript中clientWidth,offsetWidth,scrollWidth的区别

站长资源 2025/1/7 佚名

2 0 1

一、概念

　　它们都是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,clientWidth,JavaScript,offsetWidth,JavaScript,scrollWidth

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

评论“JavaScript中clientWidth,offsetWidth,scrollWidth的区别”

暂无评论...

www.wwsws.com 伏龙阁资源网

39,976影音资源

44,792技术资源

21,817软件资源

651,128站长资源

JavaScript中clientWidth,offsetWidth,scrollWidth的区别

一、概念

二、举例

1、仅有横向滚动条的情况

2、有横向滚动条和竖向滚动条的情况

vue 计算属性和侦听器的使用小结

vue keep-alive的简单总结

评论“JavaScript中clientWidth,offsetWidth,scrollWidth的区别”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新日志

友情链接