.outerWidth()

In this chapter you will learn:

Syntax and Description for .outerWidth() method
How to get the outer width
How to get outer width of margin

Syntax and Description

.outerWidth([includeMargin])

gets the current computed width for the first element in the set of matched elements, including padding and border. includeMargin is a Boolean indicating whether to include the element's margin in the calculation.

The return value is the width of the element, along with left and right padding, border, and optionally margin, in pixels.

If includeMargin is omitted or false, the padding and border are included in the calculation; if it's true, the margin is also included.

This method is not applicable to window and document objects; for these use .width() instead.

Get the outer width

The following code gets the outer width.

<html><!-- ja v  a2 s .  c  o m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type='text/javascript'>
$(document).ready(
  function() {
    alert(
      'outerWidth: '  + $('div').outerWidth() + "\n" +
      'outerHeight: ' + $('div').outerHeight()
    );
  }
);
    </script>
    <style type='text/css'>

div {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid rgb(200, 200, 200);
    background: lightblue;
}
    </style>
  </head>
  <body>
    <div>java2s.com</div>
  </body>
</html>

Click to view the demo

Get outer width of margin

The following code gets outer width and height with margin.

<html><!--from j  a v a  2s  .co m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type='text/javascript'>
$(document).ready(
  function() {
    alert(
      'outerWidth: '  + $('div').outerWidth({margin: true}) + "\n" +
      'outerHeight: ' + $('div').outerHeight({margin: true})
    );
  }
);
    </script>
    <style type='text/css'>

div {
    width: 200px;
    height: 200px;
    padding: 10px;
    border: 1px solid rgb(200, 200, 200);
    background: lightblue;
    margin: 10px;
}
    </style>
  </head>
  <body>
    <div>java2s.com</div>
  </body>
</html>

Click to view the demo

Next chapter...

What you will learn in the next chapter: