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的区别的资料请关注脚本之家其它相关文章！