Element Width and Height
$(selector).width();
$(selector).height();
$(selector).width(value);
width()
Called with no argument, .width() returns just the element's inner content width, excluding any padding, border, or margin. Pass a number or CSS value to it instead, and it sets that content width directly.
Example: width()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
.box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
#parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
#parent .box { margin: 0; }
</style>
</head>
<body>
<button id="runBtn">Read width()</button><button id="resetBtn" class="secondary">Reset</button>
<div id="box" class="box" style="width:200px">Box (CSS width: 200px)</div>
<div id="output"></div>
<script>
$("#runBtn").click(function () {
$("#output").text("width() = " + $("#box").width() +
"\n(content only: the 10px padding on each side and 2px border on each side are NOT counted)");
});
$("#resetBtn").click(function () { $("#output").text(""); });
</script>
</body>
</html>
Example: width() vs innerWidth() vs outerWidth() Diagram
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
#wrap { display: flow-root; width: fit-content; max-width: 100%; }
#box { width: 150px; height: 60px; padding: 20px; border: 8px solid navy; background: #ffb74d; margin: 0; }
#content { height: 100%; background: steelblue; color: white; text-align: center; line-height: 60px; }
.legend { margin: 10px 0; font-size: 13px; }
.legend span.sw { display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin: 0 4px 0 12px; border: 1px solid #333; }
.legend span.sw:first-child { margin-left: 0; }
.sw.c { background: steelblue; } .sw.p { background: #ffb74d; } .sw.b { background: navy; }
.bar { height: 22px; margin: 6px 0; width: 0; color: #fff; font-size: 12px; line-height: 22px; white-space: nowrap; overflow: hidden; transition: width .4s; }
#barW { background: steelblue; }
#barI { background: linear-gradient(90deg, #ffb74d 0 20px, steelblue 20px calc(100% - 20px), #ffb74d calc(100% - 20px)); }
#barO { background: linear-gradient(90deg, navy 0 8px, #ffb74d 8px 28px, steelblue 28px calc(100% - 28px), #ffb74d calc(100% - 28px) calc(100% - 8px), navy calc(100% - 8px)); }
.bar b { padding-left: 4px; text-shadow: 0 0 3px #000; }
</style>
</head>
<body>
<button id="runBtn">Measure the box</button><button id="resetBtn" class="secondary">Reset</button>
<div class="legend"><span class="sw c"></span>content <span class="sw p"></span>padding <span class="sw b"></span>border</div>
<div id="wrap"><div id="box"><div id="content">content</div></div></div>
<div id="barW" class="bar"></div>
<div id="barI" class="bar"></div>
<div id="barO" class="bar"></div>
<div id="output"></div>
<script>
function measure() {
var w = $("#box").width(), i = $("#box").innerWidth(), o = $("#box").outerWidth();
$("#barW").css("width", w).html("<b>width() = " + w + "</b>");
$("#barI").css("width", i).html("<b>innerWidth() = " + i + "</b>");
$("#barO").css("width", o).html("<b>outerWidth() = " + o + "</b>");
$("#output").text("width()=" + w + ", innerWidth()=" + i + ", outerWidth()=" + o +
"\ncontent " + w + " + padding " + (i - w) + " = innerWidth " + i +
"\ninnerWidth " + i + " + border " + (o - i) + " = outerWidth " + o);
}
$("#runBtn").click(measure);
$("#resetBtn").click(function () {
$(".bar").css("width", 0).empty();
$("#output").text("");
});
</script>
</body>
</html>
height()
height() gets or sets the content height of an element the same way width() handles width, ignoring padding, border, and margin in both directions. Together, the two give you precise control over an element's content box size.
Example: height()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
.box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
#parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
#parent .box { margin: 0; }
</style>
</head>
<body>
<button id="runBtn">Read height()</button><button id="resetBtn" class="secondary">Reset</button>
<div id="box" class="box" style="height:100px">Box (CSS height: 100px)</div>
<div id="output"></div>
<script>
$("#runBtn").click(function () {
$("#output").text("height() = " + $("#box").height() +
"\n(content only: the 10px padding on top/bottom and 2px border are NOT counted)");
});
$("#resetBtn").click(function () { $("#output").text(""); });
</script>
</body>
</html>
Changing Width and Height
Width and height can be changed together for simple resizing, such as scaling an image container to a new size in response to user input. Setting both at once keeps the element's proportions consistent with a design you're targeting.
Example: Changing Width and Height
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
.box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
#parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
#parent .box { margin: 0; }
</style>
</head>
<body>
<button id="runBtn">Set 200 x 200</button><button id="resetBtn" class="secondary">Reset</button>
<div id="box" class="box" style="width:100px;height:100px">Box</div>
<div id="output"></div>
<script>
var origStyle = $("#box").attr("style");
$("#runBtn").click(function () {
var before = $("#box").width() + " x " + $("#box").height();
$("#box").width(200).height(200);
var after = $("#box").width() + " x " + $("#box").height();
$("#output").text("Before: " + before + "\nAfter: " + after);
});
$("#resetBtn").click(function () {
$("#box").attr("style", origStyle);
$("#output").text("");
});
</script>
</body>
</html>
Example: Grow and Shrink with Before/After Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
.box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
#parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
#parent .box { margin: 0; }
</style>
</head>
<body>
<button id="runBtn">Grow +50px</button><button id="shrinkBtn">Shrink -50px</button><button id="resetBtn" class="secondary">Reset</button>
<div id="box" class="box" style="width:100px;height:60px">Box</div>
<div id="output"></div>
<script>
var origStyle = $("#box").attr("style");
function change(delta) {
var before = $("#box").width() + " x " + $("#box").height();
$("#box").width(function (i, w) { return Math.max(40, w + delta); })
.height(function (i, h) { return Math.max(30, h + delta); });
$("#output").text("Before: " + before + "\nAfter: " + $("#box").width() + " x " + $("#box").height());
}
$("#runBtn").click(function () { change(50); });
$("#shrinkBtn").click(function () { change(-50); });
$("#resetBtn").click(function () {
$("#box").attr("style", origStyle);
$("#output").text("");
});
</script>
</body>
</html>
Using Percentage Values
Width can be set using percentage strings like '50%' when the layout needs to be responsive to its parent's size rather than a fixed pixel value. jQuery computes the actual pixel width from that percentage but still returns pixel values when you read it back.
Example: Using Percentage Values
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
.box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
#parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
#parent .box { margin: 0; }
</style>
</head>
<body>
<button id="runBtn">Set width("50%")</button><button id="resetBtn" class="secondary">Reset</button>
<div id="parent"><div id="box" class="box" style="width:25%">Box</div></div>
<div id="output"></div>
<script>
var origStyle = $("#box").attr("style");
$("#runBtn").click(function () {
var before = $("#box").width();
$("#box").width("50%");
$("#output").text("Parent width(): " + $("#parent").width() + "px" +
"\nBefore (25%): box width() = " + before + "px" +
"\nAfter (50%): box width() = " + $("#box").width() + "px");
});
$("#resetBtn").click(function () {
$("#box").attr("style", origStyle);
$("#output").text("");
});
</script>
</body>
</html>
Reading Dimensions
Reading dimensions is useful when you need to make layout decisions in JavaScript, such as deciding whether an element is wide enough to fit a tooltip beside it. Since these methods return live values, they always reflect the element's current rendered size.
Example: Reading Dimensions
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<style>
body { font-family: sans-serif; padding: 12px; }
button { padding:6px 14px; margin:4px; background:#2c6aa0; color:white; border:none; border-radius:4px; cursor:pointer; }
button.secondary, #resetBtn { background:white; color:#2c6aa0; border:1px solid #2c6aa0; }
input[type=text] { padding: 6px 8px; margin: 0 6px 8px 0; border: 1px solid #888; border-radius: 4px; font: 14px sans-serif; }
.stage { border: 2px dashed #888; border-radius: 4px; padding: 10px; margin: 8px 0; min-height: 40px; background: #fafafa; }
.stage::before { content: attr(data-label); display: block; font-size: 12px; color: #666; margin-bottom: 6px; }
.item { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.fresh { background: #ffe066 !important; border-color: #d4a600 !important; }
.done { text-decoration: line-through; color: #a33; }
ul.stage { padding-left: 32px; }
ul.stage:empty::after { content: "(empty)"; color: #999; }
ul.stage > li { border: 1px solid #4a7fb5; background: #eaf2fb; padding: 6px 10px; margin: 4px 0; border-radius: 4px; }
.box { border: 2px solid #4a7fb5; background: #f3f8fd; border-radius: 4px; padding: 8px 10px; margin: 8px 0; min-height: 54px; }
.box .label { display: block; font-weight: bold; margin-bottom: 6px; color: #2c6aa0; }
#output { margin-top:10px; padding:8px; border:1px solid #ccc; border-radius:4px; background:#f7f7f7; font-family:monospace; min-height:24px; white-space:pre-wrap; }
#output:empty::before { content: "Output appears here"; color: #888; }
.box { background: steelblue; color: white; border: 2px solid navy; padding: 10px; margin: 8px 0; }
#parent { width: 400px; max-width: 100%; border: 2px dashed #888; background: #eee; padding: 0; }
#parent .box { margin: 0; }
</style>
</head>
<body>
<button id="runBtn">Check width</button><button id="shrinkBtn">Shrink to 80px</button><button id="resetBtn" class="secondary">Reset</button>
<div id="box" class="box" style="width:150px">Box</div>
<div id="output"></div>
<script>
var origStyle = $("#box").attr("style");
function check() {
var w = $("#box").width();
$("#output").text("width() = " + w + "\n" + (w > 100 ? "Wide enough for a tooltip" : "Too narrow for a tooltip"));
}
$("#runBtn").click(check);
$("#shrinkBtn").click(function () { $("#box").width(80); check(); });
$("#resetBtn").click(function () {
$("#box").attr("style", origStyle);
$("#output").text("");
});
</script>
</body>
</html>
- Expecting
.width()to include padding and border, when it returns only the content width, so 200px with 20px padding still gives 200. - Passing a string with the unit in the wrong place, such as
.width("200"), when a number or a string with a unit like"200px"is the clear form. - Reading
.width()on a hidden element withdisplay:noneand trusting the value, which can be wrong or zero.
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: