ऑफ़सेट मेथड

offset मेथड एलिमेंट की डॉक्यूमेंट के सापेक्ष पोजीशन प्राप्त करने की अनुमति देता है, position मेथड के विपरीत, जो पैरेंट के मार्जिन के सापेक्ष निर्देशांक प्राप्त करता है। offset मेथड अधिक उपयोगी है जब मौजूदा एलिमेंट के ऊपर नए एलिमेंट को पोजिशन करना हो ग्लोबल मैनिपुलेशन के लिए, उदाहरण के लिए, ड्रैग-एंड-ड्रॉप को लागू करने के लिए (drag-and-drop)। अपने परिणाम के रूप में, मेथड एक ऑब्जेक्ट लौटाता है, जिसमें top और left प्रॉपर्टीज होती हैं। गणना में त्रुटियाँ तब उत्पन्न हो सकती हैं जब उपयोगकर्ता पेज के आकार को बदलता है। यह मेथड छिपे हुए एलिमेंट्स के निर्देशांक भी प्राप्त नहीं करता है।

सिंटैक्स

वर्तमान निर्देशांक प्राप्त करें। कुछ मामलों में प्राप्त मान भिन्नात्मक हो सकते हैं:

javascript$(सिलेक्टर).offset();

एलिमेंट के निर्देशांक बदलने के लिए, एक ऑब्जेक्ट पास करना होगा, जिसमें top और left प्रॉपर्टीज हों:

javascript$(सिलेक्टर).offset({top: 40, left: 40});

हम दिए गए फंक्शन को सेट में प्रत्येक एलिमेंट पर भी लागू कर सकते हैं। इस मामले में, फंक्शन पहले पैरामीटर के रूप में सेट में एलिमेंट की इंडेक्स प्राप्त करेगा, और दूसरे पैरामीटर के रूप में - top और left निर्देशांक वाला ऑब्जेक्ट। फंक्शन के अंदर this करंट एलिमेंट की ओर इशारा करेगा। एलिमेंट के निर्देशांक के मान उन पर बदल जाएंगे, जो फंक्शन वापस करेगा:

javascript$(सिलेक्टर).width(function(सेट में इंडेक्स, {वर्तमान निर्देशांक}));

उदाहरण

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

html<div id="result">वर्ग पर क्लिक करें ...</div>
<div id="test"></div>

css#test {
  position: absolute;
  top: 40px;
  left: 40px;
  width: 100px;
  height: 100px;
  background: green;
  color: white;
  margin-top: 10px;
  cursor: pointer;
}

javascript$('*', document.body).click(function(event) {
  let offset = $(this).offset();
  
  event.stopPropagation();
  $('#result').text('Left: ' + offset.left + ', Top: ' + offset.top);
});

उदाहरण

आइए दूसरे पैराग्राफ के निर्देशांक बदलें:

html<p style="margin-left: 10px;">टेक्स्ट1</p>
<p style="margin-left: 10px;">टेक्स्ट2</p>

javascript$('p').last().offset({top: 40, left: 60});

यह भी देखें