HTML DOM clientHeight प्रॉपर्टी का उपयोग HTML एलिमेंट की व्यूएबल ऊंचाई (viewable height) प्राप्त करने के लिए किया जाता है। इस ऊंचाई में पैडिंग शामिल होती है लेकिन बॉर्डर, स्क्रॉलबार और मार्जिन शामिल नहीं होते। यह केवल एलिमेंट की ऊंचाई वापस करेगा भले ही कंटेंट एलिमेंट से ओवरफ्लो हो रहा हो।
इसे इस प्रकार कैलकुलेट किया जा सकता है:
CSS height + CSS padding - border - scrollbar (horizontal) - margins
सिंटैक्स (Syntax)
clientHeight प्रॉपर्टी का सिंटैक्स:
element.clientHeight
उदाहरण (Example)
HTML DOM clientHeight प्रॉपर्टी का एक उदाहरण:
<!DOCTYPE html> <html> <head> <style> #styleDIV { height: 250px; padding: 10px; margin: 15px; border: 2px solid blue; background-color: lightgreen; text-align: center; } </style> </head> <body> <p>div की ऊंचाई प्राप्त करने के लिए नीचे दिए गए बटन पर क्लिक करें, जिसमें पैडिंग शामिल है।</p> <button onclick="heightDiv()">GET HEIGHT</button> <div id="styleDIV"> <b>A sample div</b> </div> <p id="Sample"></p> <script> function heightDiv() { var x = document.getElementById("styleDIV"); var txt = "Height including padding = " + x.clientHeight; document.getElementById("Sample").innerHTML = txt; } </script> </body> </html>आउटपुट (Output)
इससे निम्नलिखित आउटपुट प्राप्त होगा:
GET HEIGHT बटन पर क्लिक करने पर:
उपरोक्त उदाहरण में:
हमने "styleDIV" आईडी वाला एक डिव बनाया है और इसकी आईडी का उपयोग करके इस पर स्टाइल लागू किया है:
#styleDIV { height: 250px; padding: 10px; margin: 15px; border: 2px solid blue; background-color: lightgreen; text-align: center; } <div id="styleDIV"> <b>A sample div</b> </div>फिर हमने एक GET HEIGHT बटन बनाया जो क्लिक होने पर heightDiv() मेथड को एक्जीक्यूट करेगा:
<button onclick="heightDiv()">GET HEIGHT</button>
heightDiv() <div> एलिमेंट को getElementById() मेथड का उपयोग करके प्राप्त करता है और इसे वेरिएबल x में असाइन करता है। फिर <div> पर clientHeight प्रॉपर्टी का उपयोग करके इसकी ऊंचाई प्राप्त करता है और कुछ टेक्स्ट जोड़कर वेरिएबल txt में असाइन करता है। txt के अंदर का टेक्स्ट फिर पैराग्राफ के अंदर innerHTML प्रॉपर्टी का उपयोग करके प्रदर्शित किया जाता है:
function heightDiv() { var x = document.getElementById("styleDIV"); var txt = "Height including padding = " + x.clientHeight; document.getElementById("Sample").innerHTML = txt; }
