HTML DOM clientLeft প্রপার্টি একটি এলিমেন্টের লेफট বর্ডারের প্রস্থ পিক্সেলে রিটার্ন করে। এটি একটি রিড-অনলি প্রপার্টি। এই প্রপার্টি ভার্টিক্যাল স্ক্রোলবারের প্রস্থ অন্তর্ভুক্ত করবে কিন্তু কখনো লেফট মার্জিন বা লেফট প্যাডিং অন্তর্ভুক্ত করবে না।
সিনট্যাক্স
clientLeft প্রপার্টির সিনট্যাক্স নিচে দেওয়া হলো -
element.clientLeft
উদাহরণ
HTML DOM clientLeft প্রপার্টির একটি উদাহরণ দেখি -
<!DOCTYPE html> <html> <head> <style> #styleDiv { height: 200px; width: 200px; padding: 5px; margin: 10px; border-left: 10px solid blue; background-color: lightgreen; } </style> </head> <body> <p>নিচের বাটনে ক্লিক করুন বর্ডার লেফট প্রস্থ পিক্সেলে জানতে</p> <button onclick="leftWidth()">LEFT WIDTH</button> <div id="styleDiv"> </div> <p id="Sample"></p> <script> function leftWidth() { var x = document.getElementById("styleDiv"); var txt = "Border left width: " + x.clientLeft + "px"; document.getElementById("Sample").innerHTML = txt; } </script> </body> </html>
আউটপুট
এটি নিচের আউটপুট তৈরি করবে -
LEFT WIDTH-এ ক্লিক করলে -
উপরের উদাহরণে -
আমরা "styleDiv" আইডি সহ একটি div তৈরি করেছি এবং এর আইডি ব্যবহার করে এতে স্টাইল অ্যাপ্লাই করেছি।
#styleDiv { height: 200px; width: 200px; padding: 5px; margin: 10px; border-left: 10px solid blue; background-color: lightgreen; } <div id="styleDiv"> </div>
তারপর আমরা একটি LEFT WIDTH বাটন তৈরি করেছি যা ক্লিক করলে widthDiv() মেথড এক্সিকিউট করবে -
<button onclick="widthDiv()">LEFT WIDTH</button>
leftWidth() getElementById() মেথড ব্যবহার করে <div> এলিমেন্টটি পেয়ে ভেরিয়েবল x-এ অ্যাসাইন করে। তারপর <div>-এ clientLeft প্রপার্টি ব্যবহার করে এর লেফট বর্ডার প্রস্থ পেয়ে কিছু টেক্সট অ্যাপেন্ড করে ভেরিয়েবল txt-এ অ্যাসাইন করে। txt ভেরিয়েবলের টেক্সটটি প্যারাগ্রাফে innerHTML প্রপার্টি ব্যবহার করে txt ভেরিয়েবল অ্যাসাইন করে দেখানো হয়েছে -
function leftWidth() { var x = document.getElementById("styleDiv"); var txt = "Border left width: " + x.clientLeft + "px"; document.getElementById("Sample").innerHTML = txt; }
