outerWidth(true) method returns the width of an element (includes padding, border, and margin). - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:outerWidth

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. outerWidth

Description

outerWidth(true) method returns the width of an element (includes padding, border, and margin).

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("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);
    });/*from  ww w. ja  va  2 s .  c om*/
});
</script>
<style>
#div1 {
    height: 100px;
    width: 300px;
    padding: 10px;
    margin: 3px;
    border: 1px solid blue;
    background-color: red;
}
</style>
</head>
<body>

<div id="div1"></div>
<br>

<button>Display dimensions of div</button>

</body>
</html>

Related Tutorials