JSFiddle - React, Tailwind, and code Playground

by deepak sisodiya

HTML

<div id="div1" style="height:100px;width:300px;padding:10px;margin:3px;border:1px solid blue;background-color:lightblue;"></div>
<br>
<button>Display dimensions of div</button>
<p>outerWidth() - returns the width of an element (includes padding and border).</p>
<p>outerHeight() - returns the height of an element (includes padding and border).</p>

JavaScript

// jquery outerWidth() and outerHeight() method

$("button").click(function () {
    var txt = "";
    txt += "Width of div: " + $("#div1").width() + "</br>";
    txt += "Height of div: " + $("#div1").height() + "</br>";
    txt += "Outer width of div: " + $("#div1").outerWidth() + "</br>";
    txt += "Outer height of div: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});