前端中 width 的獲取

這篇文章實際上是在瞭解 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組件中，由於他的結果不是整數，有小數結果，更加準確。

兼容性：
一、IE8 及更低沒有返回 width 和 height。
二、IE 和 Edge 返回的內容不包括 x 和 y 屬性。

本文來源：JuFoFu

本文地址：http://www.cnblogs.com/JuFoFu/p/7719679.html

水平有限，錯誤歡迎指正，轉載請註明出處。