jQuery對於寬、高度的獲取，以及精準數值的獲取方式（含小數點）

jQuery對於寬度、高度的結果是同一套規則，本文僅以寬度爲主進行講解

 

jQuery對於寬度的獲取，API中提供了width、innerWidth、outerWidth三個函數進行獲取

 

$.fn.width()

width得到的寬度，僅爲元素自身的寬度，不包含內邊距（padding），邊框（border），外邊距（margin）

 

$.fn.innerWidth()

innerWidth得到的寬度，是在width的基礎上，再加上內邊距（padding）的寬度

 

$.fn.outerWidth([includeMargin])

outerWidth則是在innerWidth的寬度上，增長了邊框的寬度（border）

outerWidth(true)，設置了boolean參數是指定在元素的outerWidth的寬度基礎上，再增長外邊距（margin）的寬度，一般對於元素的寬度計算，咱們一般但願得到可見區域的寬度，外邊距一般對元素可見區域沒有影響；而在部分狀況下，卻須要使用外邊框來撐開實際區域以處理目標的可見範圍，此時則須要使用到outerWidth(true)，多數狀況下，並不須要得到外邊距

 

以上對於width、innerWidth、outerWidth([includeMargin])的描述，同理應用於height、innerHeight、outerHeight([includeMargin])

 

得到精準的數值

一般狀況下，使用以上的方式就能夠得到目標元素的實際寬度，但有時須要對於寬度、高度、座標等具體的數值，須要得到很是精準的數據（包含小數），例如在開發插件，開發複雜功能等狀況；而上文中描述的方式，得到的數值都是整數，實際上對於數據中的小數，javascript、jquery所返回的數值中，是進行了四捨五入，但有時候所得到的數值和實際在瀏覽器中調試的數值進行四捨五入的值不一致，看樣子是直接取整，既然如此，咱們須要有辦法能夠得到詳細的數據，自行在程序中進行結果的精準控制

在javascript中，對象的函數裏有一個getBoundingClientRect()的API函數，返回值是一個 DOMRect 對象，這個對象是由該元素的 getClientRects() 方法返回的一組矩形的集合, 即：是與該元素相關的CSS 邊框集合 。

如圖所示，函數返回的內容，包含以下8個屬性：

• bottom
• height
• left
• right
• top
• width
• x
• y

這裏的8 個屬性，所得到的數值俱爲最精確的數值，包含小數的完整數據

那麼以得到寬度爲例，得到精確的寬度數值的方法爲：

javascript

document.getElementById('elementid').getBoundingClientRect().width

jQuery

$('selector')[0].getBoundingClientRect().width

 

 

 

本文圖片來自於 jquery.com 官網