क्लाइंटहाइट
क्लाइंटहाइट पैडिंग सहित किसी तत्व की ऊंचाई का माप देता है। ध्यान दें कि बॉर्डर, मार्जिन और स्क्रॉलबार की ऊंचाई (यदि फिर से बनाई गई है) इसमें शामिल नहीं हैं।
ऑफ़सेटऊंचाई
ऑफसेटहाइट ऊर्ध्वाधर पैडिंग, ऊपर और नीचे की सीमाओं सहित किसी तत्व की ऊंचाई का माप देता है। मार्जिन यहां शामिल नहीं है।
स्क्रॉलहाइट
स्क्रॉलहाइट वर्टिकल पैडिंग सहित किसी तत्व की ऊंचाई का माप देता है और सामग्री जो इसके अतिप्रवाह गुण के कारण स्क्रीन पर दिखाई नहीं देती है।
निम्नलिखित उदाहरण क्लाइंटहाइट, ऑफसेटहाइट और स्क्रॉलहाइट को दर्शाते हैं।
उदाहरण (क्लाइंटहाइट)
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
margin-top: 10px;
height: 200px;
width: 200px;
overflow: auto;
margin: 20px;
}
#demo {
height: 250px;
padding: 20px;
background-color: beige;
border: 2px ridge red;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Client Height</button>
<div id="parent">
<div id="demo">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.clientHeight;
document.getElementById ("display").innerHTML = "Client Height is " + y + "px";
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित परिणाम देगा -
उदाहरण (ऑफसेटहाइट)
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
height: 180px;
width: 180px;
overflow: auto;
margin: 20px;
}
#demo {
height: 220px;
padding: 20px;
background-color: cornflowerblue;
border: 10px ridge red;
color: white;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Offset Height</button>
<div id="parent">
<div id="demo">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.offsetHeight;
document.getElementById ("display").innerHTML = "Offset Height is " + y + "px";
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित परिणाम देगा -
उदाहरण (स्क्रॉलहाइट)
<!DOCTYPE html>
<html>
<head>
<style>
#parent {
margin-top: 10px;
height: 200px;
width: 200px;
overflow: auto;
margin: 20px;
}
#demo {
height: 400px;
padding: 20px;
background-color: bisque;
border: 1px solid green;
}
</style>
</head>
<body>
<button onclick="getHeight()">Get Scroll Height</button>
<div id="parent">
<div id="demo">
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<article id="display"></article>
<script>
function getHeight() {
let myItem = document.getElementById("demo");
let y = myItem.scrollHeight;
document.getElementById ("display").innerHTML = "Scroll Height is " + y + "px";
}
</script>
</body>
</html> आउटपुट
यह निम्नलिखित परिणाम देगा -
