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 .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 .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 .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 .unwrap(): Remove a Parent and Keep Its Children

Remove matching immediate parents while preserving their children, and understand layout, event, and restoration implications.

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 .css(): Read, Set, and Clear Styles

Read computed styles, set and clear inline properties, and handle CSS units and numeric values in jQuery 4.0.

jQuery :button Selector: Which Elements Does It Match?

Check how :button treats button elements, ordinary button inputs, and submit or reset inputs, with a working selection example.

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 .append(): Insert Content as the Last Child

Add content at the end of an element, compare insertion with moving or cloning nodes, and handle user input as plain text.