JavaScript中clientWidth,offsetWidth,scrollWidth的区别

2022-07-24,,,,

一、概念

  它们都是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的区别的资料请关注其它相关文章!

《JavaScript中clientWidth,offsetWidth,scrollWidth的区别.doc》

下载本文的Word格式文档,以方便收藏与打印。