這篇文章其實是在瞭解 viewport 的過程中發現這些概念容易混淆做了個小小的總結。viewport的首要關鍵是寬度的獲取，寬度的計算有下麵幾個屬性和方法： clientWidth offsetWidth innerWidth scrollWidth getBoundingClientRect() ...
這篇文章其實是在瞭解 viewport 的過程中發現這些概念容易混淆做了個小小的總結。viewport的首要關鍵是寬度的獲取，寬度的計算有下麵幾個屬性和方法：
- clientWidth
- offsetWidth
- innerWidth
- scrollWidth
- getBoundingClientRect().width
Element.clientWidth
非行內元素的內部寬度（inner width of an element），包括 padding，不包括 margin 和 border。行內元素獲取的值一直是 0，值為整數，小數四捨五入（round the value to an integer），屬性為只讀。
HTMLElement.offsetWidth
獲取元素外圍寬度（layout width of an element），包括 padding，border 以及滾動條，不包括 margin。同樣是整數以及只讀。
註：這裡可以看到一個是 Element 的屬性，一個是 HTMLElement 的屬性，HTMLElement 繼承於 Element，Element 不僅包括 html 元素，還有其他像 XML 之類的能在網頁上展示的元素。可見 clientWidth 應用範圍更廣，這裡暫時不作區別。
Window.innerWidth
innerWidth 屬於 window 對象，包括了 window, frame, frameset, secondary window（二級視窗，這個不知道是啥），和元素無關，獲取的是 window 的寬度，包括了滾動條，屬性只讀。
Window.outerWidth
獲取的是瀏覽器外部寬度，這個對於頁面渲染來說意義不大。包括了所有的瀏覽器元素，例如標題欄之類的。在 iphone 6sp 上測試值為0。screen.width 和這個值結果類似，在 iphone 6sp上正常。
Element.scrollWidth
當元素內部內容沒有超出時，和 clientWidth 類似，獲取的是元素的內容寬度，包括 padding。當內容（包括所有子元素，不過）溢出時，會把溢出內容的寬度計算進去，就算設置的 overflow 為 hidden，不過溢出內容需要是有效內容，display 為 none 或者沒有內容只設置了寬度的元素是不會計算入內的。
Element.getBoundingClientRect()
這個方法不是專門返回元素寬度的，返回的是一個 DOMRect 對象：
{
bottom:-75
height:160
left:88
right:248
top:-235
width:160
x:88
y:-235
}除了 winth 和 height 外，其他值相對於 viewport。寬高計算類似 offsetWidth，包括 padding，border，不包括 margin。MDN 上說 Empty border-boxes are completely ignored. 不過不知道什麼是 Empty border-boxes，測試出來的結果都是不為0 的，行內元素也能夠獲取寬度。x，y，left，right 的值是相對於 viewport 獲取的，即頁面滾動時會有所影響。
getBoundingClientRect() 的計算會更常用於輪播等一些js組件中，因為他的結果不是整數，有小數結果，更加準確。
相容性：
1、IE8 及更低沒有返回 width 和 height。
2、IE 和 Edge 返回的內容不包括 x 和 y 屬性。
本文來源：JuFoFu
本文地址：http://www.cnblogs.com/JuFoFu/p/7719679.html
水平有限，錯誤歡迎指正，轉載請註明出處。
