Div Height Jquery

Check height of a div using jquery

by Ayyappan Sakthivadivel

HTML

<button id="getdiv">Get div Height</button>
<button id="getp">Get Paragraph Height</button>
<button id="getd">Get Document Height</button>
<button id="getw">Get Window Height</button>
 
<div class="txt-err"></div>
<p>
  Sample paragraph to test height
</p>

<div class="ck-height">Sample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test heightSample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test heightSample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test heightSample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test height Sample div to test height</div>

CSS

body {
    background: yellow;
  }
  button {
    font-size: 12px;
    margin: 2px;
  }
  p {
    width: 150px;
    border: 1px red solid;
  }
  .txt-err {
    color: red;
    font-weight: bold;
  }
  .ck-height{
    border: #f00 solid 1px;
  }

JavaScript

function showHeight( element, height ) {
  $( ".txt-err" ).text( "The height for the " + element + " is " + height + "px." );
}
$( "#getdiv" ).click(function() {
  showHeight( "div", $( ".ck-height" ).height() );
});
$( "#getp" ).click(function() {
  showHeight( "paragraph", $( "p" ).height() );
});
$( "#getd" ).click(function() {
  showHeight( "document", $( document ).height() );
});
$( "#getw" ).click(function() {
  showHeight( "window", $( window ).height() );
});