ক্লায়েন্ট উচ্চতা
ক্লায়েন্ট উচ্চতা প্যাডিং সহ একটি উপাদানের উচ্চতার পরিমাপ দেয়। মনে রাখবেন যে সীমানা, মার্জিন এবং স্ক্রলবারের উচ্চতা (যদি পুনঃস্থাপন করা হয়) এতে অন্তর্ভুক্ত নয়৷
অফসেট উচ্চতা
offsetHeight উল্লম্ব প্যাডিং, উপরের এবং নীচের সীমানা সহ একটি উপাদানের উচ্চতা পরিমাপ দেয়। মার্জিন এখানে অন্তর্ভুক্ত নয়।
স্ক্রোল উচ্চতা
scrollHeight উল্লম্ব প্যাডিং সহ একটি উপাদানের উচ্চতা এবং এর ওভারফ্লো বৈশিষ্ট্যের কারণে পর্দায় দৃশ্যমান নয় এমন বিষয়বস্তুর পরিমাপ দেয়৷
নিম্নলিখিত উদাহরণগুলি ক্লায়েন্ট উচ্চতা, অফসেট উচ্চতা এবং স্ক্রোল উচ্চতাকে চিত্রিত করে৷
উদাহরণ (ক্লায়েন্ট উচ্চতা)
<!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> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
