Get html element rendered height with jQuery

A really simple question.

For example, I have a class like this:

.someclass {
  font-size: 1.2em /* let's say tha开发者_运维技巧t 1em is set to 10px in this example */
  padding: 1em 0 2em 0;
  border: 0.1em solid #000;
}

And some simple html to use it:

<div class="someclass">Test</div>

I would like to get the generated height of this element - computed height with border and padding. Using jQuery .height() method in this example gives the current value of line-height property - as expected, because the text in the div has only one line.

I know I could do the calculations myself as they are relatively simple but I'd like to ask - is there a built-in solution for that in jQuery?

jQuery has several methods to do just this. See http://api.jquery.com/category/dimensions/

In this case, it sounds like you want outerHeight(). http://api.jquery.com/outerHeight/

go for innerHeight

This method returns the height of the element, including top and bottom padding, in pixels.

Use .outerHeight().

http://api.jquery.com/outerHeight/

Get the current computed height for the first element in the set of matched elements, including padding, border, and optionally margin.

What you are looking for is .outerHeight() - jQuery API