JavaScript中clientWidth,offsetWidth,scrollWidth的区别

一、概念

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

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

二、举例

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

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

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

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

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

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

以上就是element中clientwidth,offsetwidth,scrollwidth的区别的详细内容，更多关于clientwidth,offsetwidth,scrollwidth的区别的资料请关注其它相关文章！