jQuery <div> get outer width and height size including padding, margin and border

Introduction

jQuery outerWidth(true) includes the CSS properties (width + padding-left + padding-right + border-left + border-right + margin-left + margin-right)

the outerHeight(true) includes (height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom).</p>

View in separate window 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get Outer-Width and Outer-Height of an Element including Margin</title>
<style>
    #box{/*from   ww w .j a va 2 s. com*/
        width: 300px;
        height: 200px;
        padding: 25px;
        text-align: justify;
        border: 10px solid #c6b51a;
        background: #f0e68c;
        margin: 15px;
    }
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        var divWidth = $("#box").outerWidth(true);
        var divHeight = $("#box").outerHeight(true);
        $("#result").html("Outer Width: " + divWidth + ", " + "Outer Height: " + divHeight);
    });
});
</script>
</head>
<body>
    <div id="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla non purus nisld Dapibus nec turpis vel, semper malesuada ant.</div>
    <button type="button">Get outerWidth and outerHeight with margin</button>
    <p id="result"></p>
  <hr>
</body>
</html>



PreviousNext

Related