在前端jQuery代碼中突然看到outerheight(),第一感覺就是，這是什么鬼？然后仔細查閱了一下，居然發現還有這么多相似的東西。

在jQuery中，獲取元素高度的函數有3個，它們分別是height()、?innerHeight()、outerHeight()。

與此相對應的是，獲取元素寬度的函數也有3個，它們分別是width()、?innerWidth()、outerWidth()。

它們之間有什么區別呢？以下圖盒模型為例：

height():其高度范圍是所匹配元素的高度height；

innerheight():其高度范圍是所匹配元素的高度height+padding；

outerheight():其高度范圍是所匹配元素的高度height+padding+border；

outerheight(true)其高度范圍是所匹配元素的高度height+padding+border+margin；

<div id="element" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div><script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script><script type="text/javascript">var $ele = $("#element");// height() = height(100) = 100document.writeln($ele.height()); // 100// innerHeight() = height(100) + padding(10*2)= 120 document.writeln($ele.innerHeight()); // 120// outerHeight() = height(100) + padding(10*2) + border(1*2) = 122 document.writeln($ele.outerHeight()); // 122// outerHeight(true) = height(100) + padding(10*2) + border(1*2) + margin(5*2) = 132 document.writeln($ele.outerHeight(true)); // 132</script>

水平方向上寬度大小也是如此

轉載于:https://www.cnblogs.com/yangmingyu/p/6908487.html

總結

以上是生活随笔為你收集整理的jQuery中的height()、innerheight()、outerheight()的区别总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。