Summary of differences between height (), innerheight (), and outerheight () in jQuery, jqueryouterheight

Summary of differences between height (), innerheight (), and outerheight () in jQuery, jqueryouterheight

Suddenly we see outerheight () in the front-end jQuery code. The first thought is, what is this? Then I checked it carefully and found that there were many similar things.

In jQuery, there are three functions for retrieving the element height: height (), innerHeight (), and outerHeight ().

Correspondingly, there are also three functions for Retrieving Element width, which are width (), innerWidth (), and outerWidth ().

What are the differences between them? Take the box model as an example:

Height (): The height range is the height of the matched element;

Innerheight (): The height range is the height + padding of the matched element;

Outerheight (): The height range is the height of the matched element, height + padding + border;

Outerheight (true) the height range of the matched element is 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>

The same is true for the width in the horizontal direction.