In jQuery, there are three functions to get the height of an element, they are height(), innerHeight(), outerHeight().
Correspondingly, there are also three functions to obtain the width of an element, which are width(), innerWidth(), and outerWidth().
Here, we take the three functions height(), innerHeight(), and outerHeight() as examples to introduce the differences between them in detail.
Let's take the box model of the element box as an example to introduce the difference between them.
height(): height
innerHeight(): height + padding
outerHeight(): height + padding + border
outerHeight(true): height+padding+border+margin
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery-1.10.1.min.js"></script>
</head>
<body>
<div id="box" style="margin:5px; padding:10px; width:100px; height:100px; border:1px solid #000;"></div>
<script>
var $ele = $("#box");
// 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>
</body>
</html>
Effect picture: