在前端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) = 100 document.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>
水平方向上寬度大小也是如此