HTML DOM borderLeftColor প্রপার্টি একটি এলিমেন্টের বাম বর্ডারের রঙ পাওয়া বা সেট করার জন্য ব্যবহৃত হয়।
সিনট্যাক্স
borderLeftColor প্রপার্টি সেট করার সিনট্যাক্স:
object.style.borderLeftColor = "color|transparent|initial|inherit"
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| color | বাম বর্ডারের রঙ নির্দিষ্ট করতে ব্যবহৃত হয়। ডিফল্ট রঙ কালো। |
| transparent | বাম বর্ডারকে স্বচ্ছ করে দেয় যাতে নিচের কন্টেন্ট দেখা যায়। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #IMG1{ border-left:solid 8px; border-left-color: orange; } </style> <script> function changeBorderLeft(){ document.getElementById("IMG1").style.borderLeftColor="lightgreen"; document.getElementById("Sample").innerHTML="বাম বর্ডার রঙ এখন সবুজে পরিবর্তিত হয়েছে"; } </script> </head> <body> <img id="IMG1" src="https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150"> <p>নিচের বাটনে ক্লিক করলে উপরের ইমেজের বাম বর্ডার রঙ পরিবর্তন হবে</p> <button onclick="changeBorderLeft()">বর্ডার রঙ পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
বর্ডার রঙ পরিবর্তন করুন বাটনে ক্লিক করলে:
উপরোক্ত উদাহরণে:
আমরা "IMG1" আইডি সহ একটি ইমেজ এলিমেন্ট তৈরি করেছি যার CSS স্টাইল প্রয়োগ করা হয়েছে। CSS স্টাইলে বাম বর্ডার শৈলী এবং বাম বর্ডার রঙ নির্দিষ্ট করা হয়েছে।
#IMG1 { border-left:solid 8px; border-left-color: orange; } <img id="IMG1" src=" https://www.tutorialspoint.com/tensorflow/images/tensorflow-mini-logo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=550&w=150">
তারপর বর্ডার রঙ পরিবর্তন করুন নামে একটি বাটন তৈরি করা হয়েছে যা ক্লিক করলে changeBorderLeft() মেথড এক্সিকিউট হবে।
<button onclick="changeBorderLeft()">বর্ডার রঙ পরিবর্তন করুন</button>
changeBorderLeft() মেথড getElementById() মেথড ব্যবহার করে "IMG1" আইডি সহ <img> এলিমেন্টটি পায় এবং এর borderLeftColor স্টাইল প্রপার্টিকে lightgreen সেট করে। এটি বাম বর্ডার রঙকে lightgreen-এ পরিবর্তন করে এবং এই পরিবর্তনটি "Sample" আইডি সহ প্যারাগ্রাফে এর innerHTML প্রপার্টি ব্যবহার করে প্রদর্শন করে।
function changeBorderLeft(){ document.getElementById("IMG1").style.borderLeftColor="lightgreen"; document.getElementById("Sample").innerHTML="বাম বর্ডার রঙ এখন সবুজে পরিবর্তিত হয়েছে"; }
