HTML DOM borderLeft প্রপার্টি একটি এলিমেন্টের বাম বর্ডার প্রপার্টিগুলো পাওয়া বা সেট করার জন্য শর্টহ্যান্ড হিসেবে ব্যবহৃত হয়। borderLeft প্রপার্টিতে border-left-width, border-left-style, border-left-color থাকে।
সিনট্যাক্স
borderLeft প্রপার্টি সেট করার সিনট্যাক্স:
object.style.borderLeft = "width style color|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| প্যারামিটার | বিবরণ |
|---|---|
| width | বাম বর্ডারের প্রস্থ সেট করার জন্য। |
| style | বাম বর্ডারের শৈলী সেট করার জন্য। |
| color | বাম বর্ডারের রঙ সেট করার জন্য। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #P1 { border-left: 4px solid magenta; font-size: 1.5rem; } </style> <script> function changeBorderLeft(){ document.getElementById("P1").style.borderLeft="9px dashed red"; document.getElementById("Sample").innerHTML="প্যারাগ্রাফ এলিমেন্টের বাম বর্ডার এখন পরিবর্তিত হয়েছে"; } </script> </head> <body> <p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p> <p>নিচের বাটনে ক্লিক করলে উপরের প্যারাগ্রাফের বাম বর্ডার প্রপার্টি পরিবর্তন হবে</p> <button onclick="changeBorderLeft()">বাম বর্ডার পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
বাম বর্ডার পরিবর্তন করুন বাটনে ক্লিক করলে:
উপরোক্ত উদাহরণে:
আমরা প্রথমে "P1" আইডি সহ একটি প্যারাগ্রাফ তৈরি করেছি যার মধ্যে কিছু টেক্সট আছে এবং একটি সংশ্লিষ্ট CSS স্টাইল প্রয়োগ করা হয়েছে।
#P1 { border-left: 4px solid magenta; font-size: 1.5rem; } <p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p>
তারপর বাম বর্ডার পরিবর্তন করুন নামে একটি বাটন তৈরি করা হয়েছে যা ক্লিক করলে changeBorderLeft() ফাংশন এক্সিকিউট হবে।
<button onclick="changeBorderLeft()">বাম বর্ডার পরিবর্তন করুন</button>
changeBorderLeft() ফাংশন getElementById() মেথড ব্যবহার করে "P1" আইডি সহ প্যারাগ্রাফ এলিমেন্টের borderLeft স্টাইল প্রপার্টি পায় এবং এর প্রপার্টি মানকে '9px dashed red' এ পরিবর্তন করে। এই পরিবর্তনটি নির্দেশকারী একটি মেসেজ "Sample" আইডি সহ প্যারাগ্রাফে এর innerHTML প্রপার্টি ব্যবহার করে প্রদর্শন করা হয়।
function changeBorderLeft(){ document.getElementById("P1").style.borderLeft="9px dashed red"; document.getElementById("Sample").innerHTML="প্যারাগ্রাফ এলিমেন্টের বাম বর্ডার এখন পরিবর্তিত হয়েছে"; }
