（知识）width、naturalWidth、clientWidth、offsetWidth区别整理

今天在作图片裁剪功能的时候，参考了下网友的资料，发现你们对图片宽度的获取方式不尽相同，因而详细整理下各个属性的区别（详细请参考MDN）。

1，HTMLImageElement.width是一个unsigned long 类型反映了 width HTML 属性, 说明图像在CSS像素中渲染的宽度。

2，HTMLImageElement.naturalWidth返回一个 unsigned long 类型,代表图像在CSS像素中固有的宽度,若是可用的话； 不然, 返回0。

3，Element.clientWidth 属性表示元素的内部宽度，以像素计。该属性包括内边距，但不包括垂直滚动条（若是有）、边框和外边距。该属性值会被四舍五入为一个整数。若是你须要一个小数值，可以使用 element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置。")。

4，HTMLElement.offsetWidth 是一个只读属性，返回一个元素的布局宽度。一个典型的（译者注：各浏览器的offsetWidth可能有所不一样）offsetWidth是测量包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（若是存在的话）、以及CSS设置的宽度(width)的值。