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