HTML DOM borderTopStyle প্রপার্টি একটি এলিমেন্টের উপরের বর্ডারের শৈলী সেট বা ফেরত দেওয়ার জন্য ব্যবহৃত হয়।
সিনট্যাক্স
borderTopStyle প্রপার্টি সেট করার সিনট্যাক্স:
object.style.borderTopStyle = value
প্রপার্টি মানগুলো নিচে ব্যাখ্যা করা হলো:
| মান | বিবরণ |
|---|---|
| none | এটি ডিফল্ট মান যা কোনো বর্ডার না থাকা নির্দেশ করে। |
| hidden | "none"-এর মতোই কিন্তু বর্ডার স্পেস নেবে। এটি মূলত স্বচ্ছ কিন্তু উপস্থিত থাকে। |
| dotted | ডটেড বর্ডার সংজ্ঞায়িত করে। |
| dashed | ড্যাশড বর্ডার সংজ্ঞায়িত করে। |
| solid | স olid বর্ডার সংজ্ঞায়িত করে। |
| double | ডাবল বর্ডার সংজ্ঞায়িত করে। |
| groove | 3D groove বর্ডার সংজ্ঞায়িত করে এবং ridge-এর বিপরীত। |
| ridge | 3D ridged বর্ডার সংজ্ঞায়িত করে এবং groove-এর বিপরীত। |
| inset | 3D inset বর্ডার সংজ্ঞায়িত করে এবং outset-এর বিপরীত প্রভাব তৈরি করে। |
| outset | 3D outset বর্ডার সংজ্ঞায়িত করে এবং inset-এর বিপরীত প্রভাব তৈরি করে। |
| initial | প্রপার্টিকে ডিফল্ট মানে সেট করার জন্য। |
| inherit | পিতামাতা এলিমেন্ট থেকে মান উত্তরাধিকার সূত্রে পাওয়ার জন্য। |
উদাহরণ
<!DOCTYPE html> <html> <head> <style> #DIV1{ width:300px; height:100px; border-top: 8px solid dodgerblue; border-top-style: groove; } </style> <script> function changeTopStyle(){ document.getElementById("DIV1").style.borderTopStyle="dashed"; document.getElementById("Sample").innerHTML="উপরের বর্ডার শৈলী এখন পরিবর্তিত হয়েছে"; } </script> </head> <body> <div id="DIV1">SOME SAMPLE TEXT</div> <p>নিচের বাটনে ক্লিক করলে উপরের div-এর উপরের বর্ডার শৈলী পরিবর্তন হবে</p> <button onclick="changeTopStyle()">উপরের শৈলী পরিবর্তন করুন</button> <p id="Sample"></p> </body> </html>
আউটপুট
উপরের শৈলী পরিবর্তন করুন বাটনে ক্লিক করলে:
উপরোক্ত উদাহরণে:
আমরা প্রথমে "DIV1" আইডি সহ একটি div তৈরি করেছি এবং এর আইডি ভিত্তিক একটি CSS স্টাইল প্রয়োগ করেছি। স্টাইলে মূলত border-top শৈলী এবং এর প্রস্থ রয়েছে।
#DIV1{ width:300px; height:100px; border-top: 8px solid dodgerblue; border-top-style: groove; } <div id="DIV1">SOME SAMPLE TEXT</div>
তারপর উপরের শৈলী পরিবর্তন করুন নামে একটি বাটন তৈরি করা হয়েছে যা ক্লিক করলে changeTopStyle() মেথড এক্সিকিউট হবে।
<button onclick="changeTopStyle()">উপরের শৈলী পরিবর্তন করুন</button>
changeTopStyle() মেথড getElementById() ব্যবহার করে div এলিমেন্টটি পায় এবং এর borderTopStyle স্টাইল প্রপার্টিকে dashed সেট করে। এই পরিবর্তনটি "Sample" আইডি সহ প্যারাগ্রাফে প্রদত্ত টেক্সট ব্যবহার করে এর innerHTML প্রপার্টি দিয়ে প্রদর্শিত হয়।
function changeTopStyle(){ document.getElementById("DIV1").style.borderTopStyle="dashed"; document.getElementById("Sample").innerHTML="উপরের বর্ডার শৈলী এখন পরিবর্তিত হয়েছে"; }
