यह राइट-अप जावास्क्रिप्ट में 'ऑफ़सेट टॉप' संपत्ति के काम करने के बारे में विस्तार से बताता है।
जावास्क्रिप्ट में एचटीएमएल डोम 'ऑफसेटटॉप' संपत्ति कैसे काम करती है?
' ऑफसेटशीर्ष ” संपत्ति HTML तत्वों पर काम करती है और इसके मूल तत्व के 'मार्जिन', शीर्ष 'पैडिंग', 'बॉर्डर' और 'स्क्रॉलबार' भी लौटाती है।
वाक्य - विन्यास
तत्व। ऑफसेटशीर्ष
इस वाक्य रचना में, ' तत्व ” व्यूपोर्ट के सापेक्ष विशेष HTML तत्व की शीर्ष स्थिति को दर्शाता है (एक खाली क्षेत्र जहां वेब पेज की सामग्री प्रदर्शित होती है)।
टिप्पणी: लौटाए गए मान में निम्न शामिल हैं:
- शीर्ष स्थिति, और तत्व का मार्जिन।
- शीर्ष सीमा, स्क्रॉलबार, और माता-पिता की गद्दी।
उपरोक्त सिंटैक्स का व्यावहारिक रूप से उपयोग करते हैं।
उदाहरण: HTML शीर्ष स्थिति का मूल्यांकन करने के लिए 'ऑफसेटटॉप' संपत्ति को लागू करना
यह उदाहरण 'का उपयोग करता है ऑफसेटशीर्ष 'संपत्ति विशेष HTML तत्व की शीर्ष स्थिति की गणना करने के लिए अर्थात,' <दिव> ”पिक्सेल में मार्जिन सहित।
HTML कोड
सबसे पहले, निम्नलिखित HTML कोड से गुजरें:
< डिव आईडी = 'डिव1' शैली = 'शीर्ष: 20 पीएक्स; स्थिति: सापेक्ष; मार्जिन: 15 पीएक्स; सीमा: 3 पीएक्स ठोस ब्लूवायलेट; पाठ-संरेखण: केंद्र; पैडिंग: 10 पीएक्स;' >< बी > का विवरण यह डिव हैं : बी < बीआर >
ऊपर : 20 पीएक्स < बीआर >
पद : रिश्तेदार < बीआर >
मूलपाठ - संरेखित : केंद्र < बीआर >
अंतर : 15 पीएक्स < बीआर >
सीमा : 3 पीएक्स < बीआर >
डिव < बीआर >
< बटन ऑनक्लिक = 'जेएसफंक ()' > इसे क्लिक करें बटन >
< पी आईडी = 'के लिए' >> पी >
उपरोक्त कोड में:
- ' <दिव> 'तत्व को' Div1 'के साथ बताई गई आईडी' के साथ बनाया गया है शैली ” संपत्ति जो बताई गई स्टाइलिंग करती है।
- उसके बाद, '' का मुख्य भाग कथित जानकारी को निर्दिष्ट करता है।
- अगला, 'का उपयोग करके एक बटन बनाएं <बटन> 'एक संबद्ध होने वाला टैग' क्लिक पर 'घटना समारोह को निष्पादित करने के लिए' jsFunc() ”बटन क्लिक पर।
- अंत में, 'के माध्यम से एक खाली पैराग्राफ जोड़ें' '
' तत्व की गणना की गई शीर्ष स्थिति प्रदर्शित करने के लिए टैग।जावास्क्रिप्ट कोड
अब, दिए गए जावास्क्रिप्ट कोड पर विचार करें:
< लिखी हुई कहानी >
समारोह jsFunc ( ) {
एल्मंट था = दस्तावेज़। getElementById ( 'डिव1' ) ;
जहां txt = 'परिकलित ऑफ़सेटटॉप है:' + elmnt. ऑफसेटशीर्ष + 'पीएक्स
' ;
दस्तावेज़। getElementById ( 'के लिए' ) . innerHTML = TXT ;
}
लिखी हुई कहानी >उपरोक्त कोड लाइनों में:
- फ़ंक्शन को 'नाम से परिभाषित किया गया है' jsFunc() ”।
- इसकी परिभाषा में, चर ' elmnt '' के साथ घोषित किया गया है था 'कीवर्ड जो' का उपयोग करता है getElementById () 'आईडी' द्वारा शामिल 'div' तक पहुंचने की विधि ' विभाग 1 ”।
- उसके बाद, 'लागू करें ऑफसेटशीर्ष पिक्सेल में प्राप्त 'div' की शीर्ष स्थिति की गणना करने के लिए 'txt' चर में संपत्ति।
- अंत में, 'getElementById ()' को जोड़े गए खाली पैराग्राफ तक पहुंचने के लिए फिर से लागू किया जाता है और '' तत्व के परिकलित शीर्ष स्थिति मान को 'के माध्यम से' पैराग्राफ में जोड़ा जाता है। innerHTML ' संपत्ति।
उत्पादन
इस परिणाम में, यह देखा जा सकता है कि दिए गए div (मार्जिन सहित) की शीर्ष स्थिति, यानी ' 35 पीएक्स ” निर्दिष्ट नोट (ब्लॉग की शुरुआत में) के अनुसार गणना की जाती है और बटन क्लिक पर प्रदर्शित होती है।
निष्कर्ष
जावास्क्रिप्ट प्रदान करता है ' ऑफसेटशीर्ष ” संपत्ति व्यूपोर्ट के सापेक्ष HTML तत्व की शीर्ष स्थिति की गणना करने के लिए। यह एक तत्व की गणना की गई शीर्ष स्थिति को एक पूर्णांक मान के रूप में लौटाता है ' पिक्सल ”। इस राइट-अप ने जावास्क्रिप्ट में HTML DOM एलिमेंट 'ऑफसेटटॉप' संपत्ति के उद्देश्य, उपयोग और कार्यान्वयन का प्रदर्शन किया।