JSFiddle - React, Tailwind, and code Playground

by Dineshkani

HTML

<div id="firstdiv" class="sample">
    	     Hello Jquery
</div><br/><br/>
<div id="secondiv" class="sample">
    	     Hello Javascript
</div>

CSS

.sample{
    width: 250px;
    background-color: grey;
    color: white;
    text-align: center;
    height: 80px;
    line-height: 80px;
    padding: 10px;
    margin: 10px;
    border: 2px;
}

JavaScript

//In jquery

alert("Jquery::"  + $("#firstdiv").innerHeight());

//In javascript

alert("Javascript::" + document.getElementById('secondiv').offsetHeight);


//Note that in the class sample contains the padding, margin, and border also, but in innerHeight() method return the height with padding. In the sample class padding is 10px; 

// .innerHeight() returns 100px because height = 80px; and padding = 10px (i.e., padding-top: 10px and padding-bottom: 10px) so total 80px+10px+10px = 100px;. This is why it returns the value 100.