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