.width()
.width() Return: Integer
Description: Gets the current calculated width value of the first element in the matched set of elements.
version added: 1.0.width()
The difference between.css(width) and.width() is that the latter returns a value without units (for example, 400), while the former returns a string with full units (for example, 400px). The.width() method is recommended when the width of an element needs to be calculated mathematically.
This method also calculates the width of the window and document.
$(window).width(); // returns width of browser viewport $(document).width(); // returns width of HTML document
Note that.width() always returns the content width, regardless of the CSS box-sizing property value.
Example:
Displays each width. Note that the value from the value iframe may be smaller than you expect. The iframe body is highlighted in yellow.
<! DOCTYPE html> <html> <head> <style> body { background:yellow; } button { font-size:12px; margin:2px; } p { width:150px; border:1px red solid; } div { color:red; font-weight:bold; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <button id="getp">Get Paragraph Width</button> <button id="getd">Get Document Width</button> <button id="getw">Get Window Width</button> <div> </div> <p> Sample paragraph to test width </p> <script> function showWidth(ele, w) { $("div").text("The width for the " + ele + " is " + w + "px."); } $("#getp").click(function () { showWidth("paragraph", $("p").width()); }); $("#getd").click(function () { showWidth("document", $(document).width()); }); $("#getw").click(function () { showWidth("window", $(window).width()); }); </script> </body> </html>Demo:
.width( value ) Back to jQuery
Description: Sets the CSS width for each matching element.
-
version added: 1.0.width( value )
value The number of pixels represented by a positive integer, or an integer and an optional additional unit (default: "px") (as a string).
-
version added: 1.4.1.width( function(index, width) )
function(index, width) Returns a function to set the width. Accepts the index position of the element and the old height value of the element as arguments.
When calling the.width(value) method, the "value" argument can be either a string (number plus units) or a number. If the "value" parameter provides only a number, jQuery automatically adds the unit px. If only a string is provided, any valid CSS size can be assigned to the width (like 100px, 50%, or auto). Note that in modern browsers, CSS width properties do not include padding, border, or margin. Unless the box-sizing CSS property is used.
If no explicit unit is given (like 'em' or '%'), then by default 'px' is simply added (meaning 'px' is the default unit).
Note that the width of the.width('value') container is based on the CSS box-sizing property. Changing this property to border-box will cause the function to change to get the container's outerWidth instead of the original width.
Example:
When you click each div, set the width of the div to 30px and change the color.
<! DOCTYPE html> <html> <head> <style> div { width:70px; height:50px; float:left; margin:5px; background:red; cursor:pointer; } </style> <script src="http://code.jquery.com/jquery-latest.min.js"></script> </head> <body> <div></div> <div>d</div> <div>d</div> <div>d</div> <div>d</div> <script> $("div").one('click', function () { $(this).width(30) .css({cursor:"auto", "background-color":"blue"}); }); </script> </body> </html>