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").innerWidth());

//In javascript

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


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

// .innerWidth() returns 270px because width = 250px; and padding = 10px (i.e., padding-left: 10px and padding-right: 10px) so total 250px+10px+10px = 270px;. This is why it returns the value 270.