Readers land on many variants of the same question: javascript get width of element, javascript get element width, get width of element javascript, js get width of element, or get element width js. Some searches shorten to javascript element width or get element width without the language prefix. People also bundle width with height under javascript get element size; the same APIs often answer both once you know which “box” you need (content, padding, border, margin).
None of the common width getters include margin. offsetWidth counts the border box inside the margin. Pick an API based on whether you need the full border box, the padding box, or just the declared CSS width string. First select a node (get element in JavaScript); then read one of the properties below. For viewport coordinates, transforms, and more DOMRect fields, see getBoundingClientRect in JavaScript.
The sample paragraph uses explicit box-sizing: content-box so the arithmetic matches the default CSS box model taught in most guides:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<style>
#para {
width: 50px;
padding: 10px;
border: 5px solid black;
margin: 20px;
display: inline-block;
box-sizing: content-box;
}
</style>
</head>
<body>
<p id="para">This is a paragraph</p>
</body>
</html>The fenced numbers below were captured with jsdom 24.0.0. Because jsdom does not perform full layout, a small computed-style shim supplies border-box widths so offsetWidth, clientWidth, and getBoundingClientRect().width match the math a real browser applies to this fixture. In Chrome DevTools on the same HTML, you should see the same integers.
Tested on: Node.js v20.18.2 with jsdom for layout snippets. Fences that touch
document/ layout APIs use{run=false}for plain Node runners.
offsetWidth (border box width)
offsetWidth is an integer pixel width of the element’s layout border box in horizontal direction: content width, plus horizontal padding, plus horizontal border, plus any vertical scrollbar width when overflow makes one visible.
For this fixture: 50px content + 20px horizontal padding + 10px horizontal border → 80 pixels.
const element = document.getElementById("para");
console.log(element.offsetWidth);You should see one line logging 80.
clientWidth (padding box width)
clientWidth includes the content area and horizontal padding, but excludes horizontal borders and vertical scrollbars. Here: 50 + 10 + 10 = 70.
const element = document.getElementById("para");
console.log(element.clientWidth);You should see one line logging 70.
getComputedStyle and the CSS width string
window.getComputedStyle(element).width returns the used value for the width property as a string (usually with a px suffix). On this element it is the content-box width from the stylesheet, not the border box.
const element = document.getElementById("para");
console.log(window.getComputedStyle(element).width);
console.log(parseInt(window.getComputedStyle(element).width, 10));You should see 2 lines, in order: 50px, 50.
Use parseFloat when you need fractional pixels. With box-sizing: border-box, the same width declaration can represent a different geometric slice, so always pair getComputedStyle reads with the box model you intend.
getBoundingClientRect().width
getBoundingClientRect() returns a DOMRect tied to the viewport. Its width is the horizontal border-box size after layout (sub-pixel rounding and transforms can make it differ slightly from offsetWidth in exotic cases; for normal static elements they should agree).
const element = document.getElementById("para");
console.log(element.getBoundingClientRect().width);You should see one line logging 80.
The same object’s height answers the “javascript get element size” height half of the question without changing APIs.
Summary
Javascript get width of element searches usually mean one of four measurements: offsetWidth for the border box including scrollbars when visible, clientWidth for the padding box inside borders, getComputedStyle(...).width for the declared used width string, or getBoundingClientRect().width when viewport-relative geometry matters. The top FAQ is why offsetWidth disagrees with CSS width—box model (box-sizing), padding, border, and scrollbar gutters all contribute.
Another common question is whether getBoundingClientRect replaces width getters: it adds viewport position and sub-pixel nuance, but for static layout reads on normal elements it should align with offsetWidth unless transforms intervene. If you need height too, read the same properties’ vertical counterparts or follow getBoundingClientRect in JavaScript for full DOMRect discussions.
