Inner और Outer Dimensions
innerWidth() content और padding include करता है लेकिन border नहीं।
Syntax
$(selector).innerWidth();
$(selector).outerWidth(includeMargin);
$(selector).innerHeight();
$(selector).outerHeight(includeMargin);innerWidth()
.innerWidth() content area plus left और right padding मिलाकर report करता है, border जुड़ने से पहले का box size देते हुए। यह width() (जो padding exclude करता है) और outerWidth() (जो border भी शामिल करता है) के बीच बैठता है।
उदाहरण: innerWidth()
<!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%; background: #c8e6c9; border: 1px dashed #4a8; margin: 8px 0; }
#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 4px; 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; } .sw.m { background: #c8e6c9; }
</style>
</head>
<body>
<button id="runBtn">Read innerWidth()</button><button id="padBtn">Padding +10px</button><button id="borderBtn">Border +4px</button><button id="resetBtn" class="secondary">Reset</button>
<div class="legend"><span class="sw c"></span>content (width/height) <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="output"></div>
<script>
function report() {
var w = $("#box").width(), i = $("#box").innerWidth();
$("#output").text("width()=" + w + ", innerWidth()=" + i +
"\ninnerWidth() = content " + w + " + padding " + (i - w) + " (left + right); border is NOT included");
}
$("#runBtn").click(report);
$("#padBtn").click(function () {
$("#box").css("padding", (parseInt($("#box").css("padding-left"), 10) + 10) + "px");
report();
});
$("#borderBtn").click(function () {
$("#box").css("border-width", (parseInt($("#box").css("border-left-width"), 10) + 4) + "px");
report();
});
$("#resetBtn").click(function () {
$("#box").removeAttr("style");
$("#output").text("");
});
</script>
</body>
</html>innerHeight()
innerHeight() content और padding include करता है लेकिन border नहीं, vertical direction में innerWidth() को mirror करते हुए। इसे तब इस्तेमाल करें जब आपको border की thickness की चिंता किए बिना किसी element का visible box size चाहिए।
उदाहरण: innerHeight()
<!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%; background: #c8e6c9; border: 1px dashed #4a8; margin: 8px 0; }
#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 4px; 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; } .sw.m { background: #c8e6c9; }
</style>
</head>
<body>
<button id="runBtn">Read innerHeight()</button><button id="padBtn">Padding +10px</button><button id="borderBtn">Border +4px</button><button id="resetBtn" class="secondary">Reset</button>
<div class="legend"><span class="sw c"></span>content (width/height) <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="output"></div>
<script>
function report() {
var h = $("#box").height(), i = $("#box").innerHeight();
$("#output").text("height()=" + h + ", innerHeight()=" + i +
"\ninnerHeight() = content " + h + " + padding " + (i - h) + " (top + bottom); border is NOT included");
}
$("#runBtn").click(report);
$("#padBtn").click(function () {
$("#box").css("padding", (parseInt($("#box").css("padding-left"), 10) + 10) + "px");
report();
});
$("#borderBtn").click(function () {
$("#box").css("border-width", (parseInt($("#box").css("border-left-width"), 10) + 4) + "px");
report();
});
$("#resetBtn").click(function () {
$("#box").removeAttr("style");
$("#output").text("");
});
</script>
</body>
</html>outerWidth()
outerWidth() content, padding, और borders include करता है, आपको page पर visually दिखने वाली element की पूरी rendered width देते हुए। यह वह number है जो आप तब चाहेंगे जब calculate करना हो कि कोई element असल में कितनी horizontal space occupy करता है।
उदाहरण: outerWidth()
<!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%; background: #c8e6c9; border: 1px dashed #4a8; margin: 8px 0; }
#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 4px; 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; } .sw.m { background: #c8e6c9; }
</style>
</head>
<body>
<button id="runBtn">Read outerWidth()</button><button id="padBtn">Padding +10px</button><button id="borderBtn">Border +4px</button><button id="resetBtn" class="secondary">Reset</button>
<div class="legend"><span class="sw c"></span>content (width/height) <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="output"></div>
<script>
function report() {
var w = $("#box").width(), i = $("#box").innerWidth(), o = $("#box").outerWidth();
$("#output").text("width()=" + w + ", innerWidth()=" + i + ", outerWidth()=" + o +
"\nouterWidth() = content " + w + " + padding " + (i - w) + " + border " + (o - i));
}
$("#runBtn").click(report);
$("#padBtn").click(function () {
$("#box").css("padding", (parseInt($("#box").css("padding-left"), 10) + 10) + "px");
report();
});
$("#borderBtn").click(function () {
$("#box").css("border-width", (parseInt($("#box").css("border-left-width"), 10) + 4) + "px");
report();
});
$("#resetBtn").click(function () {
$("#box").removeAttr("style");
$("#output").text("");
});
</script>
</body>
</html>outerHeight()
outerHeight() content, padding, और borders include करता है, vertical dimension के लिए outerWidth() को match करते हुए। जब आप दूसरे elements को इसके पूरे visible footprint के relative position कर रहे हों तो यह सबसे accurate measurement है।
उदाहरण: outerHeight()
<!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%; background: #c8e6c9; border: 1px dashed #4a8; margin: 8px 0; }
#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 4px; 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; } .sw.m { background: #c8e6c9; }
</style>
</head>
<body>
<button id="runBtn">Read outerHeight()</button><button id="padBtn">Padding +10px</button><button id="borderBtn">Border +4px</button><button id="resetBtn" class="secondary">Reset</button>
<div class="legend"><span class="sw c"></span>content (width/height) <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="output"></div>
<script>
function report() {
var h = $("#box").height(), i = $("#box").innerHeight(), o = $("#box").outerHeight();
$("#output").text("height()=" + h + ", innerHeight()=" + i + ", outerHeight()=" + o +
"\nouterHeight() = content " + h + " + padding " + (i - h) + " + border " + (o - i));
}
$("#runBtn").click(report);
$("#padBtn").click(function () {
$("#box").css("padding", (parseInt($("#box").css("padding-left"), 10) + 10) + "px");
report();
});
$("#borderBtn").click(function () {
$("#box").css("border-width", (parseInt($("#box").css("border-left-width"), 10) + 4) + "px");
report();
});
$("#resetBtn").click(function () {
$("#box").removeAttr("style");
$("#output").text("");
});
</script>
</body>
</html>Margins को Include करना
outerWidth() या outerHeight() को true pass करें ताकि measurement में element की margins भी शामिल हों। यह total layout space calculate करते समय ज़रूरी है, क्योंकि margins असर करते हैं कि कोई element अपने siblings के बीच कितनी जगह लेता है भले ही वे खुद box का हिस्सा न हों।
उदाहरण: Including Margins
<!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%; background: #c8e6c9; border: 1px dashed #4a8; margin: 8px 0; }
#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 4px; 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; } .sw.m { background: #c8e6c9; }
#box { margin: 20px; }
</style>
</head>
<body>
<button id="runBtn">Read outerWidth(true)</button><button id="padBtn">Padding +10px</button><button id="borderBtn">Border +4px</button><button id="resetBtn" class="secondary">Reset</button>
<div class="legend"><span class="sw c"></span>content (width/height) <span class="sw p"></span>padding <span class="sw b"></span>border <span class="sw m"></span>margin</div>
<div id="wrap"><div id="box"><div id="content">content</div></div></div>
<div id="output"></div>
<script>
function report() {
var o = $("#box").outerWidth(), m = $("#box").outerWidth(true);
$("#output").text("outerWidth()=" + o + ", outerWidth(true)=" + m +
"\nouterWidth(true) = " + o + " + margin " + (m - o) + " (left + right); the green area is the margin");
}
$("#runBtn").click(report);
$("#padBtn").click(function () {
$("#box").css("padding", (parseInt($("#box").css("padding-left"), 10) + 10) + "px");
report();
});
$("#borderBtn").click(function () {
$("#box").css("border-width", (parseInt($("#box").css("border-left-width"), 10) + 4) + "px");
report();
});
$("#resetBtn").click(function () {
$("#box").removeAttr("style");
$("#output").text("");
});
</script>
</body>
</html>Related Topics
{# common_mistakes/chapter_summary/browser_support: on Hindi pages the
view already swaps in the hi_ translation fields (or blanks these
out if untranslated), so this renders correctly for both languages
without a lang_code check here. #}
आम गलतियां
.innerWidth()इस्तेमाल करना और border के शामिल होने की उम्मीद करना, जबकि सिर्फ padding content में जुड़ती है।- यह भूल जाना कि margin शामिल करने के लिए
.outerWidth(true)चाहिए, क्योंकि plain.outerWidth()इसे छोड़ देता है। - layout calculate करते समय
.width()और.outerWidth()को mix up करना, इसलिए sizes padding और border से off हो जाते हैं।
🔒
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: