Toggle navigation
☰
Home
HTML
CSS
Scripting
Database
<!DOCTYPE html> <title>My Example</title> <style> #resizeMe { background: gold; width: 180px; height: 220px; margin: 7px; padding: 10px; border: 5px solid black; overflow: auto; resize: both; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $( function() { $( "button" ).click( function() { var msg = ""; msg = msg + "<p>Outer Width: " + $( "#resizeMe" ).outerWidth( true ); msg = msg + "<p>Outer Height: " + $( "#resizeMe" ).outerHeight( true ); msg = msg + "<p>Resize me, then 'Get Dimensions' again..."; $("#resizeMe").prepend(msg); }); }); </script> <button>Get Dimensions</button> <p>Includes padding, borders, and margins.</p> <div id="resizeMe"> </div>
