JQuery height (), innerheight (), outerheight () function of the difference between the detailed _jquery

In jquery, there are 3 functions to get the height of an element, respectively, height (), innerheight (), Outerheight ().

Correspondingly, there are 3 functions to get the width of the element, respectively, width (), innerwidth (), Outerwidth ().

Here, we take the height (), innerheight (), Outerheight () 3 functions as an example to detail the differences between them.

The following is an example of a box model of element elements to describe the differences between them.

function	Height Range	jquery version	support for write operations
height()	Height	1.0+	1.0+
innerHeight()	Height + padding	1.2.6+	1.8.0+
outerHeight()	Height + padding + border	1.2.6+	Whether
outerHeight(true)	Height+padding+border+margin	1.2.6+	Whether

1, only the height () function can be used for window or document objects.
2, "Support write operation" means that this function can set the height value for the element.
3, 1.4.1+ height () new support parameters for the function (previously only support values).
4, 1.8.0+ innerheight () support parameter is numeric or function.

Now we'll refer to the following HTML + jquery sample code:

<div id= "element" style= "MARGIN:5PX; padding:10px; width:100px; height:100px; border:1px solid #000; " ></div>
<script type= "Text/javascript" >
var $ele = $ ("#element");

Height () = height (m) =
Document.writeln ($ele. Height ());//M

/innerheight () = height (m) + padding (10*2) = 
Document.writeln ($ele. Innerheight ());//M//

outerheight () = height (+) + padding (10*2) + border (1*2) = 122 
Document.writeln ($ele. Outerheight ());//122

//Outerheight (true) = height (m) + padding (10*2) + bo Rder (1*2) + margin (5*2) = 132 Document.writeln 
($ele. Outerheight (TRUE);//132
</script>

When testing, remember the jquery address on the machine.