किसी वेब पेज का लेआउट डिज़ाइन करते समय ऊंचाई और चौड़ाई सबसे महत्वपूर्ण आयाम हैं।
'ऊंचाई' ऊपर से नीचे तक किसी वस्तु की लंबाई की माप को इंगित करती है जबकि 'चौड़ाई' इंगित करती है कि कोई वस्तु एक तरफ से दूसरी तरफ तक कितनी चौड़ी है। ये कारक विंडो में किसी ऑब्जेक्ट के आवंटन को समायोजित करने में सहायता करते हैं। जावास्क्रिप्ट में, ' ऊंचाई ' और ' चौड़ाई संपत्तियों को क्रमशः दो श्रेणियों 'आंतरिक' यानी, 'आंतरिक ऊंचाई/आंतरिक चौड़ाई', और 'बाहरी' यानी, 'बाहरी ऊंचाई/बाहरी चौड़ाई' में वर्गीकृत किया गया है।
यह लेख जावास्क्रिप्ट में विंडो 'इनरहाइट' प्रॉपर्टी के उद्देश्य और कार्यप्रणाली पर विस्तार से बताता है।
विंडो 'इनरहाइट' प्रॉपर्टी जावास्क्रिप्ट में क्या करती है?
“ आंतरिक ऊँचाई ” संपत्ति “विंडो” ऑब्जेक्ट से जुड़ी है जो लोकेशन बार, टूलबार, मेनू बार और अन्य को छोड़कर ब्राउज़र विंडो की व्यूपोर्ट ऊंचाई को पुनः प्राप्त करती है। इसके अलावा, इसमें क्षैतिज स्क्रॉलबार की ऊंचाई भी शामिल है यदि इसे शामिल किया गया है। इस संपत्ति का लौटाया गया मूल्य 'लेआउट व्यूपोर्ट' विंडो से लिया गया है, अर्थात, वह क्षेत्र जो वेब पेज सामग्री प्रदर्शित करता है।
मूल सिंटेक्स
window.innerHeight या आंतरिक ऊँचाई
उपरोक्त वाक्यविन्यास के अनुसार, ' आंतरिक ऊँचाई 'संपत्ति को आसानी से सीधे या 'विंडो' ऑब्जेक्ट का उपयोग करके लागू किया जा सकता है।
आइए उपरोक्त परिभाषित संपत्ति को उसके मूल वाक्यविन्यास की सहायता से व्यावहारिक रूप से कार्यान्वित करें।
उदाहरण 1: ब्राउज़र विंडो की व्यूपोर्ट ऊंचाई लौटाने के लिए विंडो 'इनरहाइट' प्रॉपर्टी लागू करना
यह उदाहरण ब्राउज़र विंडो की व्यूपोर्ट ऊंचाई को पुनः प्राप्त करने के लिए 'विंडो' ऑब्जेक्ट के साथ 'इनरहाइट' प्रॉपर्टी का उपयोग करता है।
HTML कोड
सबसे पहले, नीचे दिए गए कोड पर एक नज़र डालें:
< एच 2 > विंडो इनरहाइट प्रॉपर्टी एच 2 >< बटन क्लिक पर = 'jsFunc()' > ऊंचाई प्राप्त करें बटन >
< पी पहचान = 'के लिए' > पी >
उपरोक्त कोड पंक्तियों में:
- “ टैग लेवल 2 उपशीर्षक को परिभाषित करता है।
- “ <बटन> ” टैग इवेंट ट्रिगर होने पर फ़ंक्शन “jsFunc()” को शुरू करने के लिए “ऑनक्लिक” इवेंट वाले बटन का प्रतिनिधित्व करता है।
- “ <पी> टैग लागू 'इनरहाइट' प्रॉपर्टी के लौटाए गए मान को प्रदर्शित करने के लिए निर्दिष्ट आईडी 'पैरा' के साथ एक खाली पैराग्राफ जोड़ता है।
जावास्क्रिप्ट कोड
अब, नीचे दिए गए कोड के साथ आगे बढ़ें:
< लिखी हुई कहानी >समारोह jsFunc ( ) {
होने देना h = window.innerHeight;
document.getElementById ( 'के लिए' ) .innerHTML = 'विंडो की आंतरिक ऊंचाई:' + एच;
}
लिखी हुई कहानी >
कोड की उपरोक्त पंक्तियों में:
- सबसे पहले, 'नाम वाले एक फ़ंक्शन को परिभाषित करें jsFunc() ”।
- इसकी परिभाषा में, 'एच' चर 'लागू होता है' आंतरिक ऊँचाई 'विंडो' ऑब्जेक्ट का उपयोग कर संपत्ति।
- उसके बाद, ' लागू करें getElementById() इसकी आईडी 'पैरा' का उपयोग करके अतिरिक्त खाली पैराग्राफ प्राप्त करने की विधि और इसमें वर्तमान ब्राउज़र विंडो की आंतरिक ऊंचाई प्रदर्शित करें।
उत्पादन
जैसा कि उपरोक्त आउटपुट में दिखाया गया है, वर्तमान ब्राउज़र विंडो व्यूपोर्ट ऊंचाई (आंतरिक ऊंचाई) प्रदर्शित करती है, अर्थात, ' 599px बटन क्लिक करने पर।
उदाहरण 2: संयुक्त विंडो 'इनरहाइट' और 'इनरविड्थ' गुणों को लागू करना
'इनरहाइट' प्रॉपर्टी को अन्य आयाम गुणों जैसे 'इनरविड्थ', 'आउटरविड्थ', 'आउटरहाइट' आदि के साथ लागू किया जा सकता है। इस परिदृश्य में, इसका उपयोग 'इनरविड्थ', 'आउटरहाइट' आदि के साथ किया जाता है। आंतरिक चौड़ाई ' संपत्ति।
HTML कोड
आइए संशोधित HTML कोड का अवलोकन करें:
< एच 2 > विंडो इनरहाइट और इनरविड्थ गुण एच 2 >< बटन क्लिक पर = 'jsFunc()' > ऊंचाई और चौड़ाई प्राप्त करें बटन >
< पी पहचान = 'के लिए' > पी >
यहां, '
' और '<बटन>' तत्वों की सामग्री को आवश्यकताओं के अनुसार संशोधित किया गया है।
जावास्क्रिप्ट कोड
अब, जावास्क्रिप्ट कोड का अवलोकन करें:
< लिखी हुई कहानी >समारोह jsFunc ( ) {
होने देना h = window.innerHeight;
होने देना में = window.innerWidth;
document.getElementById ( 'के लिए' ) .innerHTML = 'आंतरिक ऊंचाई:' + एच + '
आंतरिक चौड़ाई: ' + में ;
}
लिखी हुई कहानी >
उपरोक्त कोड में, दोनों ' आंतरिक ऊँचाई ' और ' आंतरिक चौड़ाई 'गुणों को क्रमशः ब्राउज़र विंडो की व्यूपोर्ट ऊंचाई और चौड़ाई प्राप्त करने के लिए लागू किया जाता है।
उत्पादन
जैसा कि देखा गया है, आउटपुट बटन क्लिक पर वर्तमान ब्राउज़र विंडो की आंतरिक व्यूपोर्ट ऊंचाई और चौड़ाई निर्दिष्ट करता है।
निष्कर्ष
जावास्क्रिप्ट ' खिड़की 'ऑब्जेक्ट केवल-पढ़ने के लिए ऑफ़र करता है' आंतरिक ऊँचाई ” संपत्ति जिसे ब्राउज़र विंडो की व्यूपोर्ट ऊंचाई (आंतरिक) वापस करने के लिए लागू किया जा सकता है। इसमें केवल क्षैतिज स्क्रॉल बार ऊंचाई शामिल है यदि यह दी गई है। अन्यथा, यह ब्राउज़र विंडो में उपलब्ध किसी अन्य आइटम की ऊंचाई की गणना नहीं करता है। इस लेख में जावास्क्रिप्ट में विंडो 'इनरहाइट' प्रॉपर्टी के उद्देश्य, कार्य (व्यावहारिक कार्यान्वयन के साथ) का संक्षिप्त विवरण प्रदान किया गया है।