Detailed introduction to the specific usage of jQuery.outerWidth() function_jquery

Let’s demonstrate the outerWidth() function through jQuery example code,

The outerWidth() function is used to set or return the outer width of the current matching element. By default, the outer width includes the padding and border of the element, but does not include the width of the margin part. You can also specify the parameter as true to include the width of the margin portion. As shown below:

If you want to get the width of other situations, please use width() and innerWidth(). You can click here to see the difference between the three. This function belongs to a jQuery object (instance) and still works on invisible elements. Syntax jQuery 1.2.6 Added this function. jQueryObject.outerWidth( [ includeMargin ] ) Note: If the current jQuery object matches multiple elements, only the outer width of the first matching element is returned. Parameter Parameter Description includeMargin Optional/Boolean type indicates whether to include the width of the margin part. The default is false. Return value The return value of the outerWidth() function is of type Number, returning the outer width of the first matching element. If the current jQuery object matches multiple elements, when returning the outer width, the outerWidth() function only uses the first matching element. If there are no matching elements, null is returned. outerWidth() is not available for window and document, please use width() instead. Examples & Instructions Take the following HTML code as an example:

Copy code The code is as follows:

f52ac8c80c1864fb55d890fba086537416b28748ea4df4d9c2150843fecfba68
efede7f52b87c4148c754f65c9dab57216b28748ea4df4d9c2150843fecfba68

The following jQuery sample code is used to demonstrate the specific usage of the outerWidth() function:

var $n1 = $("#n1"); 
var $n2 = $("#n2"); 
// outerWidth() = width(100) + padding(10*2) + border(1*2) = 122 
document.writeln( $n1.outerWidth() ); // 122 
document.writeln( $n2.outerWidth() ); // 150 
var $divs = $("div"); 

// If multiple elements are matched, only the outerWidth of the first element is returned

document.writeln( $divs.outerWidth() ); // 122 
//outerWidth(true) = width(100) + padding(10*2) + border(1*2) + margin(5*2) = 132 
document.writeln( $n1.outerWidth(true) ); // 132 

The above content introduces the jQuery.outerWidth() function in detail, I hope you will like it.