JavaScript中clientWidth,offsetWidth,scrollWidth的区别

　　它们都是Element的属性，表示元素的宽度：

Element.clientWidth    内容+内边距-滚动条-----不包括边框和外边距  == 可视内容
Element.scrollWidth    内容+内边距+溢出尺寸-----不包括边框和外边距  ==实际内容
Element.offsetWidth   元素的宽度（内容+内边距+边框+滚动条）==整体，整个控件

 
 
 
  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;
  }
 




 

　　仅有横向滚动条的情况时，父元素收受到子元素宽度的影响，其他比较特别的是scrollWidth。

　　父元素的scrollWidth是：子元素的content+padding+border+子元素一边的margin+父元素一边的padding。

 
 
 
  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;
  }
 




 

　　父元素的width为：父元素的content宽度-滚动条的宽度（大约为15px）

　　父元素的clientWidth为：父元素的content宽度+父元素padding宽度-滚动条宽度（大约为15px）

以上就是Element中clientWidth,offsetWidth,scrollWidth的区别的详细内容，更多关于clientWidth,offsetWidth,scrollWidth的区别的资料请关注考高分网其它相关文章！