jQuery Tutorial Tutorials - jQuery .outerWidth() method

jQuery .outerWidth() method

The .outerWidth() method in jQuery is used to get/set the outer width (including padding, border and optionally margin) of the matched element.

jQuery .outerWidth() method Syntax

.outerWidth([includeMargin])
.outerWidth(value)
.outerWidth(function)
Parameter Type Description
inlcudeMargin Boolean whether to include the element's margin when computing, default false
value String,Number the outer width value to set
funtion(index, oldWidth) Function a function returning the outer width to set.
index is the position of the element in the set.(based on 0)
oldWidth is the old outer width.

.outerWidth()

Get the current computed outer width(including padding,border and optionally margin) of the first matched element.(If the element is not visible, the width would be 0 )

example

Get the outer width of the first paragraph

$("p").outerWidth();
$("p").outerWidth(true); // including the margin

Try now

.outerWidth(value)

Set the outer width of every matched elements.

example

Set the outerWidth of each p to 300px

$("p").outerWidth(300);

Try now

.outerWidth(function)

example

Set the outerWidth of the element to 20px wider than the previous.

$("p").outerWidth(function(index,oldValue){
    return 20*index + oldValue;
});

Try now

Date：2019-08-20 15:54:17 From:www.Lautturi.com author：Lautturi
.outerHeight() method
.width() method