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個尺寸方法的介面演算法就是這樣的了

JQuery學習之jQuery尺寸

1.width 和height 方法 width 設定或返回元素的寬度 不包括內邊距，邊框或外邊距 height 設定或返回元素的高度 不包括內邊距，邊框或外邊距 button click function var txt txt width div1 width txt height div1 h...

jQuery學習教程十七 jQuery 尺寸

通過 jquery，很容易處理元素和瀏覽器視窗的尺寸。jquery 提供多個處理尺寸的重要方法 width 方法設定或返回元素的寬度 不包括內邊距 邊框或外邊距 height 方法設定或返回元素的高度 不包括內邊距 邊框或外邊距 下面的例子返回指定的 元素的寬度和高度 顯示 div 的尺寸 widt...

jQuery 其他 尺寸值

包裹元素 用b包裹每乙個a div wrap 用b包裹所有a div wrapall 用b包裹每乙個a的內容 div wrapinner 遍歷節點 div each function i,e 寬度 console.log one width width console.log one innerwi...