How to get the real height of a div object in javascript?

Question

see below: demo

$("#stdout").height()

return 18px

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

how to do it?

thank you for your help :)

Answer 1

See . externalHeight ()

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

And if you also want to specify a margin:

$("#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();