jQuery尺寸演算法

我們預設都統一是採用offsetWidth或是offsetHeight取值了，但我們知道關於這2個尺寸的演算法是這樣的：

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width;  offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width;

不在考慮box-sizing:padding-box的情況下，也就差不多了。但關於尺寸的介面不是還有

innerWidth、innerHeight、outerWidth、outerHeight這些類似的處理嗎？當然雖然都是取得尺寸還是有差別的。

innerWidth、innerHeight

用於取得符合集合中第一個元素的目前計算的內部寬高（包括padding，但不包括border），或設定每一個符合元素的內部寬高。

outerWidth、outerHeight

取得元素集合中第一個元素的目前計算寬高度值,包括padding，border和選擇性的margin

針對這些情況，jquery不得不給一個方法用來去掉對應的值，這個是對應的augmentWidthOrHeight方法

我們具體看看怎麼計算的

innerWidth = ele.offsetWidth –ele.borderRightWidth –ele.borderLeftWidth innerHeight = ele.offseHeight –ele.borderTopHeight –ele.borderBottomHeight

outerWidth如果不傳遞參數，那麼演算法就跟innerWidth一樣

如果傳遞outerWidth(true)就需要加上margin

outerWidth(true) = ele.offsetWidth + ele.marginLeft + ele.marginRight outerHeigth(true) = ele.offsetHeigth + ele.marginTop + ele.marginBottom

關於jQuery6個尺寸方法的介面演算法就是這樣的了

• php小數取整的方法(附實例)

• 有關php-fpm的配置介紹

• php去除數組中重複資料的二個例子

• PHP二維陣列去重的實例解析

• php陣列去重的函數程式碼範例

• PHP陣列根據值取得Key的簡單範例

• #asp註冊程式碼

• asp 分頁程式

• 人文的ASP開發基礎入門簡介

• 突破性的ASP 技術

• php小數取整的方法(附實例)

• 有關php-fpm的配置介紹

• php去除數組中重複資料的二個例子

• PHP二維陣列去重的實例解析

• php陣列去重的函數程式碼範例

• PHP陣列根據值取得Key的簡單範例

• #asp註冊程式碼

• #asp 分頁程式

• 人文的ASP開發基礎入門簡介

• 突破性的ASP 技術

以上是jQuery尺寸演算法的詳細內容。更多資訊請關注PHP中文網其他相關文章！