Categories

.outerWidth()

Categories: Style Properties | CSS | Dimensions

.outerWidth( [ includeMargin ] )Returns: Integer

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

  • .outerWidth( [ includeMargin ] )

    version added: 1.0

    includeMargin   A 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.

  • Get the outerWidth of a paragraph.

    HTML:
    <p>Hello</p><p></p>
    CSS:
    
      p { margin:10px;padding:5px;border:2px solid #666; }
      
    Code:
    var p = $("p:first");
    $("p:last").text( "outerWidth:" + p.outerWidth()+ " , outerWidth(true):" + p.outerWidth(true) );
    
    

.outerWidth( value, [ includeMargin ] )Returns: jQuery

Plugin: jQuery.fn.size

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

  • .outerWidth( value, [ includeMargin ] )

    version added: 1.0

    value   An integer representing the number of pixels.

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

This method set the width of the element, including left and right padding, border, and optionally margin, in pixels.

This method is not applicable to window and document objects.

  • Set the outer width of all div elements with class box.

    HTML:
    <div class="box"></div>
    CSS:
    .box {
        position:    absolute,
        margin:      15px,
        border:      solid 5px,
        padding:     10px,
        width:       100px,
        height:      100px
    }
    Code:
    $('div').outerWidth(300);
    Results:
    <div class="box" style="width: 270px;"></div>
  • Set the outer width inclusive margin of all div elements with class box.

    HTML:
    <div class="box"></div>
    CSS:
    .box {
        position:    absolute,
        margin:      15px,
        border:      solid 5px,
        padding:     10px,
        width:       100px,
        height:      100px
    }
    Code:
    $('div').outerWidth( 300, true );
    Results:
    <div class="box" style="width: 240px;"></div>