jQuery .width(): Measure and Set Content Width

jQuery Reference

.width() reads the first element’s content width as a pixel-based number, or sets the content width of matched elements. It excludes padding, borders, and margins.

Syntax and behavior

const width = $("#box").width();
$("#box").width(300);
$("#box").width("50%");

A numeric setter value is interpreted as pixels; supply a string for other units. A getter returns the calculated content width even when the CSS uses percentages, and the result can be fractional. With box-sizing: border-box, CSS width includes the border, but .width() still reports content width. .innerWidth() includes padding, .outerWidth() includes borders, and .outerWidth(true) also includes margins.

The official jQuery .width() documentation describes additional call signatures and argument types.

Complete runnable example

Save the following code as a UTF-8 example.html file and open it in a browser. It loads the full jQuery 4.0.0 build from an external URL, so an internet connection is required. The $(function () { ... }) callback waits for the document to be ready before running the example.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery width example</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="box" style="box-sizing: border-box; width: 300px; padding: 20px; border: 5px solid #835b00; margin: 10px;">Size comparison</div>
<button id="resize" type="button">Set content width to 300px</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      function report() {
        $("#output").text("Content: " + $("#box").width() +
          " / Including padding: " + $("#box").innerWidth() +
          " / Including border: " + $("#box").outerWidth() +
          " / CSS width: " + $("#box").css("width"));
      }
      report();
      $("#resize").on("click", function () { $("#box").width(300); report(); });
    });
  </script>
</body>
</html>

Expected result

Initially, the output is Content: 250 / Including padding: 290 / Including border: 300 / CSS width: 300px. Clicking the button sets content width to 300. The padding-and-border total and CSS width then become 350px. The horizontal margins are not included in these values.

Important details and troubleshooting

A fixed width can exceed a narrow screen. Consider the parent’s size and max-width in a real interface; the example uses fixed values to make the box-model comparison explicit.
Hidden elements may not yield reliable measurements, and browser zoom and fractional pixels can affect results. Measure visible, laid-out elements and do not assume the result is an integer.
Constraints such as min-width and max-width can prevent a requested value from becoming the final size. Read the measurement again after setting it.
.width() also works on window and document, but these represent viewport and document dimensions rather than an element’s content box. Choose the target that answers your question.

Compare the behavior with .css() and computed styles.

jQuery Reference

jQuery .remove(): Remove Elements, Data, and Events

Remove selected elements and their descendants, understand selector filtering, and compare empty and detach for reuse.

jQuery .prepend(): Insert Content as the First Child

Add content at the beginning of an element and understand how existing nodes and multiple destinations affect the result.

jQuery .attr(): Read and Set HTML Attributes

Read and set attributes, distinguish them from current field properties, and understand Boolean and ARIA handling in jQuery 4.0.

jQuery .addClass(): Add One or More CSS Classes

Add one or more classes while preserving existing names, generate classes with a callback, and check why styling may not change.

jQuery .find(): Select Matching Descendants

Search through descendant levels while excluding the container, and compare find with children, filter, and has.

jQuery .wrapAll(): Put Selected Elements in One Wrapper

Collect selected elements into one wrapper and inspect how separated siblings move, including the limits of unwrapping.

jQuery .toggleClass(): Toggle a Class or Set Its State

Distinguish reversing a class from setting a known Boolean state, with a toggle-button example and current syntax.

jQuery .after(): Insert Content as the Next Sibling

Insert or move content immediately after a target, and compare after with inside insertion and insertAfter syntax.

jQuery .addBack(): Include the Previous Traversal Selection

Include the previous traversal collection and understand which elements the optional selector filters.

jQuery :contains(): Match Elements by Text Content

Explore case-sensitive substring matching, descendant text, and a safer way to handle dynamic search strings without constructing selectors.