Inner और Outer Dimensions
$(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>
</head>
<body>
<div id="box" style="width:100px;padding:10px;border:5px solid black">Box</div>
<script>
console.log($("#box").innerWidth());
</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>
</head>
<body>
<div id="box" style="height:100px;padding:10px;border:5px solid black">Box</div>
<script>
console.log($("#box").innerHeight());
</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>
</head>
<body>
<div id="box" style="width:100px;padding:10px;border:5px solid black">Box</div>
<script>
console.log($("#box").outerWidth());
</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>
</head>
<body>
<div id="box" style="height:100px;padding:10px;border:5px solid black">Box</div>
<script>
console.log($("#box").outerHeight());
</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>
</head>
<body>
<div id="box" style="width:100px;margin:20px">Box</div>
<script>
console.log($("#box").outerWidth(true));
</script>
</body>
</html>.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: