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