offsetLeft offsetWidth ClientWidth区别

网上也有不少文档，看了迷迷糊糊，不如动手试下。

div测试

图解：黄色为父div边框，灰色是父div的padding + 正式内容（外面的绿色框标注）。

蓝色是子div边框，红色是子divpadding + 正式内容（里面的绿色框标注）。

offsetLeft：子div和父div左边距距离。黄色边框内部到蓝色边框外部距离，父div的padding和子div的margin会影响到该值。本图中，由于设置了div的margin 为10px，所以该值为父div的padding+子div的margin。（注意：父div必须要设置positon属性，否则参照的父div会继续往上层查找，直到找到有position属性定义。如果都没有回参照body）。

offsetWidth：子div占用的所有宽度（width<不管有没有溢出，设置了多宽是固定的>+padding+border），与margin无关，与滚动条无关。图中子div的offsetWidth是蓝色外边框包含的整个宽度。

clientWidth：子div的width(不管有没有溢出，设置了多宽是固定的)+padding-滚动条宽度 (图中红色背景宽度，没有滚动条就不用减了。。)即可视宽度。不管padding怎么变大，实际正文的宽度是不会变的，只是整个div所占空间会变大。

scrollWidth:子div如果有滚动条，宽度就是滚动的所有内容宽度+左右padding。如强行设置没有滚动条，并且正式内容没有溢出，宽度计算和之前一样，内容宽度+左右padding。如内容溢出了，宽度是 左边padding+内容宽度+右边padding(如果右边padding被内容覆盖了就不需要再加)。图中的情况，内容没有溢出，但是有垂直滚动条，scrollWidth宽度会受到影响，需要减去滚动条的宽度（谷歌下17px）.如内容溢出并且有水平滚动条，scrollWidth不会受到垂直滚动条影响。

scrollLeft:当前水平滚动的距离。