Element Coordinates
In this page:
$(selector).offset();
$(selector).position();offset()
.offset() किसी element के top और left coordinates पूरे document के बिल्कुल top-left corner से measure करके return करता है, किसी भी parent को नज़रअंदाज़ करते हुए। यह तब सही choice है जब आपको page पर किसी element की absolute position चाहिए, वह चाहे जैसे भी nested हो।
उदाहरण: offset()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="margin-top:100px">Box</div>
<script>
console.log($("#box").offset());
</script>
</body>
</html>position()
position() पूरे document के बजाय किसी element की position उसके offset parent -- आमतौर पर non-static CSS positioning वाला सबसे नज़दीकी ancestor -- के relative return करता है। यह browser खुद absolutely positioned elements के लिए position कैसे calculate करता है उससे match करता है।
उदाहरण: position()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div style="position:relative"><div id="box" style="position:absolute;top:10px">Box</div></div>
<script>
console.log($("#box").position());
</script>
</body>
</html>Offset Set करना
offset() top और left values वाला एक object pass करके किसी element की document position भी set कर सकता है। यह सिर्फ उन elements पर उम्मीद के मुताबिक काम करता है जिनकी CSS position static नहीं है, क्योंकि offset आख़िरकार element के positioned coordinates को manipulate करता है।
उदाहरण: Setting Offset
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box" style="position:absolute">Box</div>
<script>
$("#box").offset({top: 100, left: 50});
</script>
</body>
</html>offset() और position() की तुलना
पूरे document के relative coordinates चाहिए हों तो offset() इस्तेमाल करें, जैसे किसी tooltip को page पर कहीं भी किसी element के साथ align करना। किसी specific positioned container के relative coordinates चाहिए हों जिसके अंदर element रहता है, तो position() इस्तेमाल करें।
उदाहरण: Comparing offset() and position()
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<div id="box">Box</div>
<script>
console.log("Document-relative:", $("#box").offset());
console.log("Parent-relative:", $("#box").position());
</script>
</body>
</html>Coordinates इस्तेमाल करना
offset() या position() से coordinates simple floating elements, जैसे कोई custom dropdown या tooltip, को उन्हें trigger करने वाले element के ठीक बगल में रखने में मदद कर सकते हैं। ये page पर दो elements के बीच की distance calculate करने के लिए भी उपयोगी हैं।
उदाहरण: Using Coordinates
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<button id="trigger">Show Tooltip</button>
<script>
$("#trigger").on("click", function() {
const pos = $(this).offset();
console.log("Place tooltip at:", pos.left, pos.top);
});
</script>
</body>
</html>- document position चाहिए होने पर
.position()इस्तेमाल करना, जबकि यह offset parent के relative है और.offset()document के relative है। .offset({top: 100})set करना और CSSpositioncheck किए बिना element के move होने की उम्मीद करना, जबकि एकstaticelement को jQuery द्वाराrelativeमें adjust किया जाता है।display:noneवाले किसी hidden element पर.offset()पढ़ना, जो कोई उपयोगी coordinates नहीं देता।
Chapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: