jQuery API

.outerWidth()

.outerWidth( [includeMargin] ) Returns: Integer

Description: Get the current computed width for the first element in the set of matched elements, including padding and border.

  • version added: 1.2.6.outerWidth( [includeMargin] )

    includeMarginA Boolean indicating whether to include the element's margin in the calculation.

Returns 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 true, the margin is also included.

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

Example:

Get the outerWidth of a paragraph.

<!DOCTYPE html>
<html>
<head>
  <style>
  p { margin:10px;padding:5px;border:2px solid #666; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p><p></p>
<script>var p = $("p:first");
$("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" + p.outerWidth(true) );

</script>

</body>
</html>

Demo:

Support and Contributions

Need help with .outerWidth() or have a question about it? Visit the jQuery Forum or the #jquery channel on irc.freenode.net.

Think you've discovered a jQuery bug related to .outerWidth()? Report it to the jQuery core team.

Found a problem with this documentation? Report it to the jQuery API team.

* All fields are required
  • be careful with outerWith(), borderRadius are not yet implemented (borderTopLeftRadius,borderBottomLeftRadius,borderTopRightRadius...)
  • newbieTom
    Is there a way to calculate the outerWidth of no just the first element, but all the children of an element?
  • using 1.3.2 outerWidth(true) does not include the margin. The div looks like this:
    <div class="maincontent min-right" id="get-text">

    The min-right sets a margin-right for 2% but it doesn't matter if i use percent or not it just doesn't count it up to the width.

    Using to define outerWidthe(true).
    var txtboxWidth = $("#get-text").outerWidth();</div>
  • Muthuraj
    is the outherWidth() works when the element is hidden???
  • It depends what you mean by "hidden." If an element has visibility: hidden, then yes. But if it has display: none, then no. An element that has display:none has no height or width.
  • The margin is not calculated correctly when using percentages, it calculates to around half of what it should be. For example, if I set a margin of 5%, when I subtract the difference between outerWidth(true) and outerWidth() (which should give me the margin) I get 17. However, when I look at the computed style, the computed style is 35px (this also happens when getting the marginRight css property through jQuery, so it may be an overall issue with jQuery getting proper computer margin sizes when using percentages).
  • Hi Joseph,

    Can you please report this using the bug tracker or the forum? See the big note above the comments on this page.

    Nobody who can do anything about it is going to read your comment here.
  • jove4015
    It would be extremely handy for this method to have a setter version - whereby jquery would take into account the current css for padding, border, [and margins] and automatically deduct that from the set value, setting that as the width. That way, you don't have to do this rote computation the other way either.
  • Henry Fai Hang Chan
    this is implemented in jquery UI.
  • David Judd
    Can you provide a link to this? I can't seem to find a method to accomplish this withn jQuery UI.