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