how to get DIV object reality height in javascript?

Question

please see: demo

$("#stdout").height()

return 18px

I want to get the reality height ( height + padding + border ) 200px

how to do?

thank for help :)

Answer 1

See .outerHeight()

$("#stdout").outerHeight();
// returns ( height + padding + border )

And if you want to include margin as well:

$("#stdout").outerHeight( true );
// returns ( height + padding + border + margin )

Answer 2

Here's another way:

$.fn.getHeight = function()
{
    return ($(this).height() + parseInt($(this).css("padding-top")) + parseInt($(this).css("padding-bottom")) + parseInt($(this).css("borderTopWidth")) + parseInt($(this).css("borderBottomWidth")));
};

$.fn.getWidth = function()
{
    return ($(this).width() + parseInt($(this).css("padding-left")) + parseInt($(this).css("padding-right")) + parseInt($(this).css("borderLeftWidth")) + parseInt($(this).css("borderRightWidth")));
};

To use this function, simply call:

obj.getHeight()

Or:

$(this).getHeight();