HTML DOM clientTop প্রপার্টি একটি এলিমেন্টের টপ বর্ডারের প্রস্থ পিক্সেলে রিটার্ন করে। এটি একটি রিড-অনলি প্রপার্টি। একটি এলিমেন্টের টপ মার্জিন বা টপ প্যাডিং এই প্রপার্টিতে অন্তর্ভুক্ত থাকে না।
সিনট্যাক্স
clientTop প্রপার্টির সিনট্যাক্স নিচে দেওয়া হলো -
element.clientTop;
উদাহরণ
clientTop প্রপার্টির একটি উদাহরণ দেখি -
<!DOCTYPE html> <html> <head> <style> #styleDiv { height: 250px; font-size:35px; text-align:center; width: 400px; padding: 10px; margin: 15px; border-top: 15px solid blue; background-color: lightgreen; } </style> </head> <body> <p>নিচের বাটনে ক্লিক করুন div-এর টপ বর্ডার প্রস্থ পিক্সেলে জানতে</p> <button onclick="topWidth()">TOP WIDTH</button> <div id="styleDiv"> <b>A sample div</b> </div> <p id="Sample"></p> <script> function topWidth() { var x = document.getElementById("styleDiv"); var txt = "Border top width: " + x.clientTop + "px"; document.getElementById("Sample").innerHTML = txt; } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে -
TOP WIDTH-এ ক্লিক করলে -
উপরের উদাহরণে -
আমরা "styleDiv" আইডি সহ একটি div তৈরি করেছি এবং এর আইডি ব্যবহার করে এতে স্টাইল অ্যাপ্লাই করেছি।
#styleDiv { height: 250px; font-size:35px; text-align:center; width: 400px; padding: 10px; margin: 15px; border-top: 15px solid blue; background-color: lightgreen; }
Div -
<div id="styleDiv"> <b>A sample div</b> </div>
তারপর আমরা একটি TOP WIDTH বাটন তৈরি করেছি যা ক্লিক করলে topWidth() মেথড এক্সিকিউট করবে -
<button>TOP WIDTH</button>
topWidth() getElementById() মেথড ব্যবহার করে <div> এলিমেন্টটি পেয়ে ভেরিয়েবল x-এ অ্যাসাইন করে। তারপর <div>-এ clientTop প্রপার্টি ব্যবহার করে এর টপ বর্ডার প্রস্থ পিক্সেলে পেয়ে কিছু টেক্সট অ্যাপেন্ড করে ভেরিয়েবল txt-এ অ্যাসাইন করে। txt ভেরিয়েবলের টেক্সটটি "Sample" আইডি 가진 প্যারাগ্রাফে innerHTML প্রপার্টি ব্যবহার করে txt ভেরিয়েবল অ্যাসাইন করে দেখানো হয়েছে -
function topWidth() { var x = document.getElementById("styleDiv"); var txt = "Border top width: " + x.clientTop + "px"; document.getElementById("Sample").innerHTML = txt; }
