jQuery में पोजिशनिंग

jQuery में एलिमेंट्स के कोऑर्डिनेट्स के साथ काम करने के लिए position और offset मेथड्स हैं।

ये मेथड्स वर्तमान कोऑर्डिनेट्स प्राप्त करने या बदलने के लिए होते हैं और परिणाम के रूप में एक ऑब्जेक्ट लौटाते हैं जिसमें top और left प्रॉपर्टीज़ होती हैं।

गणना में त्रुटियाँ तब उत्पन्न हो सकती हैं जब उपयोगकर्ता पेज के आकार को बदलता है। साथ ही, ये मेथड्स छिपे हुए एलिमेंट्स के कोऑर्डिनेट्स प्राप्त नहीं करते हैं।

offset मेथड एलिमेंट की पोजीशन डॉक्यूमेंट के सापेक्ष प्राप्त करता है, जबकि position मेथड एलिमेंट की पोजीशन पैरेंट की मार्जिन के सापेक्ष प्राप्त करता है।

मान लीजिए कि हमारे पास निम्नलिखित HTML कोड है:

html<div id="parent">
<p id="test">text</p>
</div>
<p id="text1"></p>
<p id="text2"></p>

पैराग्राफ से CSS स्टाइल जुड़े हुए हैं:

css#parent {
  width: 150px;
  border: 1px solid blueviolet;
}
#test {
  margin: 5px;
  text-align: center;
  outline: 1px solid green;
}

आइए test डिव की पोजीशन इन मेथड्स से प्राप्त करें, और प्राप्त ऑब्जेक्ट की कीज़ का उपयोग करके इस जानकारी को नीचे पैराग्राफ में प्रदर्शित करें:

javascriptlet offset = $('#test').offset();
$('#text1').text(
  '(OFFSET()) left: ' + offset.left + ', top: ' + offset.top
);
let position = $('#test').position();
$('#text2').text(
  '(POSITION()) left: ' + position.left + ', top: ' + position.top
);