यह ब्लॉग डोम तत्व के उपयोग को प्रदर्शित करता है clientHeight एचटीएमएल में।
HTML में DOM एलिमेंट 'क्लाइंटहाइट' का उपयोग कैसे करें?
' clientHeight ' संपत्ति डेवलपर्स को तत्व की दृश्य सामग्री की ऊंचाई की गणना करने की अनुमति देती है। यह तत्वों को एक दूसरे के सापेक्ष स्थित करने या यह निर्धारित करने में मदद करता है कि उपयोगकर्ता ने स्क्रॉल करने योग्य कंटेनर के दाहिने किनारे पर स्क्रॉल किया है या नहीं। यह वेबपेज पर शेष अप्रयुक्त स्थान के बारे में भी जानकारी प्रदान करता है।
उदाहरण
आइए 'क्लाइंटहाइट' संपत्ति के बेहतर प्रदर्शन के लिए एक उदाहरण देखें। उदाहरण के लिए, ' क्लिक पर 'घटना श्रोता का उपयोग' द्वारा प्रदान किए गए परिणाम को प्रदर्शित करने के लिए किया जाता है clientHeight ' संपत्ति:
< शरीर >
< एच 2 पहचान = 'तत्व' < / एच 2 >
< एच 2 पहचान = 'तत्व' क्लिक पर = 'शोवेलमेंट हाइट ()' >
ऊंचाई दिखाने के लिए लिनक्सहिंट आलेख पर क्लिक करें!
< / एच 2 >
< लिखी हुई कहानी >
फ़ंक्शन शोलेमेंट हाइट () {
वर उदाहरण = document.getElementById ('तत्व');
var एलिमेंटहाइट = example.clientHeight;
चेतावनी ('ऊंचाई है:' + एलिमेंटहाइट + 'पिक्सेल।');
}
< / लिखी हुई कहानी > >
< / शरीर >
उपरोक्त कोड स्निपेट की व्याख्या नीचे वर्णित है:
- प्रारंभ में, एक 'बनाएँ <एच2> 'के अंदर टैग करें' <शरीर> ” टैग करें और इसे कुछ डमी डेटा प्रदान करें। इसके अलावा, 'की एक आईडी असाइन करें तत्व ” चयनित HTML तत्व के लिए।
- अगला, एक 'जोड़ें क्लिक पर() 'घटना श्रोता जो' का आह्वान करता है शोलेमेंटहाइट () ' फ़ंक्शन जब उपयोगकर्ता ' पर क्लिक करता है <एच2> ' तत्व।
- फिर, अंदर ' शोलेमेंटहाइट () 'फ़ंक्शन नाम का एक चर बनाता है' उदाहरण 'जो HTML तत्व के लिए एक उदाहरण के रूप में कार्य करता है जिसकी एक आईडी है' तत्व ”।
- अगला, नाम का एक और वैरिएबल बनाएं “ तत्व ऊंचाई '' जो 'क्लाइंटहाइट' संपत्ति द्वारा प्रदान किए गए परिणाम को संग्रहीत करता है।
- उसके बाद, प्रदर्शित करें ' तत्व ऊंचाई '' का उपयोग करके अलर्ट बॉक्स पर चर '' चेतावनी() ' तरीका।
अंत में, स्टाइल के लिए निम्नलिखित CSS गुण जोड़ें “ एच 2 ' तत्व:
< शैली >
#तत्व {
मार्जिन: 20 पीएक्स;
पैडिंग: 10 पीएक्स;
पृष्ठभूमि- रंग : डार्कसियान;
ऊंचाई : 300 पीएक्स;
मूलपाठ- संरेखित : केंद्र;
पंक्ति- ऊंचाई : 100 पीएक्स;
}
< / शैली >
उपरोक्त कोड स्निपेट में, निम्नलिखित सीएसएस गुणों को 'की एक आईडी वाले div को असाइन किया गया है' तत्व ':
- ' 20 पीएक्स ”, “ 10 पीएक्स ' और ' डार्कसियान 'मूल्य सीएसएस को प्रदान किए जाते हैं' अंतर ”, “ गद्दी ' और ' पृष्ठभूमि का रंग ' गुण, क्रमशः।
- उपयोग भी करता है' ऊंचाई ”, “ पाठ संरेखित ' और ' ऊंची लाईन 'सीएसएस गुण उपयोगकर्ता दृश्यता बढ़ाने के लिए।
उपरोक्त कोड स्निपेट के निष्पादन के बाद, वेबपेज इस तरह दिखाई देता है:
आउटपुट प्रदर्शित करता है कि जब भी उपयोगकर्ता तत्व पर क्लिक करता है तो चयनित तत्व की ऊंचाई अलर्ट बॉक्स में प्रदर्शित होती है।
निष्कर्ष
का उपयोग करने के लिए clientHeight ”HTML में संपत्ति, आईडी विशेषता का उपयोग करके HTML तत्व का चयन करें। उसके बाद, “क्लाइंटहाइट” संपत्ति संलग्न करें और परिणाम प्रदर्शित करें। यह केवल पढ़ने के लिए संपत्ति है और पिक्सेल में परिणाम देता है। 'क्लाइंटहाइट' संपत्ति '<स्क्रिप्ट>' टैग के अंदर काम करती है। यह पैडिंग, सीमा छोड़कर और मार्जिन सहित चयनित तत्व की ऊंचाई लौटाता है। इस लेख ने प्रदर्शित किया है कि HTML में DOM एलिमेंट क्लाइंटहाइट का उपयोग कैसे करें।