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 .wrap(): Wrap Each Element Separately

Give each selected element its own wrapper, check the returned selection, and avoid duplicate IDs or repeated nesting.

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 .before(): Insert Content as the Previous Sibling

Insert or move content immediately before a target, and compare before with inside insertion and insertBefore syntax.

jQuery .add(): Combine Element Selections

Combine selections without changing the original collection, and distinguish selecting elements from inserting them into the document.

jQuery .has(): Select Elements with Matching Descendants

Filter the original selection by matching descendants, and see why has and find return different elements.

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 .addBack(): Include the Previous Traversal Selection

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

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 .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 .removeAttr(): Delete HTML Attributes

Compare deleting an attribute with setting an empty value, and handle input values, current properties, and ARIA attributes correctly.