Detailed explanation of jQuery.width() function

width() function is used to set or return the width of the current matching element.

The width value does not include the width of the element's outer margins(margin), inner margins(padding), borders, etc. As shown below:

jQuery-width-schematic-diagram.png

If you want to get the width including other parts, please use innerWidth() and outerWidth(), you can click here Check out the differences between the three.

This function belongs to the jQuery object (instance) and is still valid for invisible elements.

Syntax

jQueryObject.width( [ value ] )

Note:

1. If the value parameter is omitted, it means getting the width; if specified If this parameter is specified, it means setting the width.

2. The "setting" operation of the width() function targets each element matched by the current jQuery object; the "reading" operation only targets the first matching element.

Parameters

Parameter Description

value Optional/Number type is used to set the width value.

jQuery 1.4.1 New support: parameter value can be a function, then width() will traverse and execute the function based on all matching elements, and this in the function will point to the corresponding DOM element.

width() will also pass in two parameters to the function: the first parameter is the index of the current element in the matching element, and the second parameter is the current width value of the element. The return value of the function is the width value that needs to be set.

Return value

The return value of the width() function is jQuery/Number type. The type of the return value depends on whether the width() function is currently performing a "setting" operation or a "reading" operate.

If the width() function performs a "setting" operation, it returns the current jQuery object itself; if it is a "reading" operation, it returns the width value of the first matching element.

If the current jQuery object matches multiple elements, when returning the width, the width() function only uses the first matching element among them. If there are no matching elements, null is returned.

Example & Description

The width() function is similar to css("width"), except that the width value of width() does not have a unit (the unit is pixels).

$(element).width(); // 返回数字，例如：80
$(element).css("width"); // 返回字符串，例如："80px"

Take the following HTML code as an example:

<div id="n1" style="padding: 10px; width: 100px; height:100px; background: #eee;"></div>
<div id="n2" style="width: 200px; height:100px; background: #999;"></div>

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

var $n1 = $("#n1");
var $n2 = $("#n2");
document.writeln( $n1.width() ); // 100
document.writeln( $n2.width() ); // 200
var $divs = $("div");
// 如果匹配多个元素，只返回第一个元素的width
document.writeln( $divs.width() ); // 100
// 设置所有div元素的width不能小于300px(小于300的设为300，其它保持不变)
$divs.width( function(index, width){
    return Math.max(width, 300);
} );
// 设置n1的width为20px
$n1.width( 20 );

The above is the detailed content of Detailed explanation of jQuery.width() function. For more information, please follow other related articles on the PHP Chinese website!