（知識）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)的值。