वेनिला जावास्क्रिप्ट से div की ऊंचाई प्राप्त करना

किसी div की ऊंचाई प्राप्त करने के लिए दो मुख्य प्रॉपर्टीज हैं: clientHeight और offsetHeight।

• clientHeight - केवल पैडिंग शामिल करता है (बॉर्डर नहीं)
• offsetHeight - पैडिंग, बॉर्डर, और स्क्रॉलबार शामिल करता है

उदाहरण

<div id="myDiv" style="height: 400px; padding: 20px; border: 5px solid blue;"></div>

const div = document.querySelector('#myDiv');
console.log('clientHeight:', div.clientHeight); // 440
console.log('offsetHeight:', div.offsetHeight); // 450

व्यावहारिक उपयोग

// व्यूपोर्ट में एलिमेंट पूरी तरह दिख रहा है या नहीं चेक करना
function isFullyVisible(element) {
  const rect = element.getBoundingClientRect();
  return rect.top >= 0 && rect.bottom <= window.innerHeight;
}

// डायनामिक ऊंचाई सेट करना
function setEqualHeight(elements) {
  const maxHeight = Math.max(...Array.from(elements).map(el => el.offsetHeight));
  elements.forEach(el => el.style.height = maxHeight + 'px');
}

नोट: ये प्रॉपर्टीज रीड-ओनली हैं और पिक्सेल में पूर्णांक मान लौटाती हैं।