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(true) - returns the width of an element (includes padding, border, and margin).</p>
<p>outerHeight(true) - returns the height of an element (includes padding, border, and margin).</p>

JavaScript

// jquery outerWidth(true) and outerHeight(true) 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 (margin included): " + $("#div1").outerWidth(true) + "</br>";
    txt += "Outer height of div (margin included): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
});