HTML DOM क्लाइंटहाइट प्रॉपर्टी

<घंटा/>

HTML DOM क्लाइंटहाइट प्रॉपर्टी का उपयोग HTML एलिमेंट की देखने योग्य ऊंचाई प्राप्त करने के लिए किया जाता है। इस ऊंचाई में पैडिंग शामिल है लेकिन इसमें कोई भी बॉर्डर, स्क्रॉलबार और मार्जिन शामिल नहीं है। यह केवल तत्व की ऊंचाई लौटाएगा, भले ही सामग्री तत्व से अतिप्रवाह हो।

इसकी गणना इस प्रकार की जा सकती है -

CSS height+ CSS padding – border –scrollbar(horizontal) – margins

सिंटैक्स

क्लाइंटहाइट प्रॉपर्टी के लिए सिंटैक्स निम्नलिखित है -

element.clientHeight

उदाहरण

आइए HTML DOM क्लाइंटहाइट प्रॉपर्टी के लिए एक उदाहरण देखें -

<!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>Click the below button to get the height of the div, including padding.</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>

आउटपुट

यह निम्नलिखित आउटपुट देगा -

HTML DOM क्लाइंटहाइट प्रॉपर्टी

GET HEIGHT बटन पर क्लिक करने पर -

HTML DOM क्लाइंटहाइट प्रॉपर्टी

उपरोक्त उदाहरण में -

हमने "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 बनाया है जो कि क्लिक करने पर हाइटडिव () मेथड को एक्जीक्यूट करेगा -

<button onclick="heightDiv()">GET HEIGHT</button>

ऊंचाईडिव() getElementById() विधि का उपयोग करके

तत्व प्राप्त करता है और इसे चर x को असाइन करता है। फिर

पर क्लाइंटहाइट प्रॉपर्टी का उपयोग करके हम इसकी ऊंचाई प्राप्त करते हैं और कुछ टेक्स्ट जोड़ने के बाद इसे वेरिएबल txt में असाइन करते हैं। txt के अंदर के टेक्स्ट को पैराग्राफ में इनर HTML प्रॉपर्टी का उपयोग करके पैराग्राफ के अंदर प्रदर्शित किया जाता है और इसे txt वेरिएबल असाइन किया जाता है -

function heightDiv() {
   var x = document.getElementById("styleDIV");
   var txt = "Height including padding = " + x.clientHeight ;
   document.getElementById("Sample").innerHTML = txt;
}