HTML DOM clientHeight প্রপার্টিটি একটি HTML উপাদানের দর্শনযোগ্য উচ্চতা পেতে ব্যবহৃত হয়। এই উচ্চতা প্যাডিং অন্তর্ভুক্ত কিন্তু কোনো সীমানা, স্ক্রলবার এবং মার্জিন বাদ দেয়। উপাদান থেকে বিষয়বস্তু ওভারফ্লো হলেও এটি শুধুমাত্র উপাদানের উচ্চতা ফিরিয়ে দেবে।
এটি −
হিসাবে গণনা করা যেতে পারেCSS height+ CSS padding – border –scrollbar(horizontal) – margins
সিনট্যাক্স
ক্লায়েন্ট হাইট প্রপার্টি -
এর জন্য সিনট্যাক্স নিচে দেওয়া হলelement.clientHeight
উদাহরণ
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>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> আউটপুট
এটি নিম্নলিখিত আউটপুট −
তৈরি করবে
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() getElementById() পদ্ধতি ব্যবহার করে
এলিমেন্ট পায় এবং এটি পরিবর্তনশীল x-এ বরাদ্দ করে। তারপর
-এ clientHeight প্রপার্টি ব্যবহার করে আমরা এর উচ্চতা পাই এবং কিছু টেক্সট যুক্ত করার পর এটি পরিবর্তনশীল txt-এ বরাদ্দ করি। txt-এর ভিতরের টেক্সটটি অনুচ্ছেদের ভিতরের এইচটিএমএল প্রপার্টি ব্যবহার করে প্যারাগ্রাফের ভিতরে প্রদর্শিত হয় এবং এটিতে txt ভেরিয়েবল বরাদ্দ করা হয় −
function heightDiv() {
var x = document.getElementById("styleDIV");
var txt = "Height including padding = " + x.clientHeight ;
document.getElementById("Sample").innerHTML = txt;
} 