JavaScript中clientWidth,offsetWidth,scrollWidth的区别

　　它们都是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 {
       m@R_126_2604@in: 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中的offsetWidth、clientWidth、innerWidth及相关属性方法
• scrollWidth,clientWidth,offsetWidth的区别
• javascript scrollLeft,scrollWidth,clientWidth,offsetWidth 完全详解
• scrollWidth,clientWidth与offsetWidth的区别
• HTML:scrollLeft,scrollWidth,clientWidth,offsetWidth完全详解
• this.clientWidth和this.offsetWidth两个有什么不同
• 与ClientWidth有关的一点资料

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！