HTML DOM borderTopStyle প্রপার্টি একটি উপাদানের জন্য টপ বর্ডার স্টাইল সেট বা ফেরানোর জন্য ব্যবহার করা হয়।
−
-এর সিনট্যাক্স নিচে দেওয়া হলবর্ডার টপস্টাইল প্রপার্টি −
সেট করা হচ্ছেobject.style.borderTopStyle = value
উপরের বৈশিষ্ট্যগুলি নিম্নরূপ ব্যাখ্যা করা হয়েছে -
| মান | বিবরণ |
|---|---|
| কোনটিই নয় | এটি কোনো সীমানা উল্লেখ না করে ডিফল্ট মান। |
| লুকানো | এটি "কোনটিই নয়" এর মতো কিন্তু তবুও সীমানা স্থান নেবে৷ এটা মূলত স্বচ্ছ কিন্তু এখনও আছে. |
| ডটেড | এটি একটি বিন্দুযুক্ত সীমানা সংজ্ঞায়িত করে। |
| ড্যাশ করা | এটি একটি ড্যাশ বর্ডার সংজ্ঞায়িত করে। |
| সলিড | এটি একটি কঠিন সীমানা নির্ধারণ করে। |
| ডাবল | এটি একটি ডবল বর্ডার সংজ্ঞায়িত করে |
| খাঁজ | এটি একটি 3d খাঁজ সীমানা নির্ধারণ করে এবং এটি রিজের বিপরীত। |
| রিজ | এটি একটি 3D রিজড বর্ডার সংজ্ঞায়িত করে এবং এটি খাঁজের বিপরীত |
| ইনসেট | এটি একটি 3D ইনসেট সীমানা সংজ্ঞায়িত করে এবং প্রভাবটি মনে হচ্ছে এটি এমবসড। এটি ইনসেটের বিপরীত প্রভাব তৈরি করে। |
| আউটসেট | এটি একটি 3D ইনসেট সীমানা সংজ্ঞায়িত করে এবং প্রভাবটি মনে হচ্ছে এটি এমবসড। এটি ইনসেটের বিপরীত প্রভাব তৈরি করে। |
| প্রাথমিক | প্রাথমিক মান এই সম্পত্তি সেট করার জন্য। |
| উত্তরাধিকার | অভিভাবক সম্পত্তি মান উত্তরাধিকারসূত্রে পেতে |
বর্ডারটপস্টাইল প্রপার্টি মাইনাস;
-এর জন্য একটি উদাহরণ দেখা যাকউদাহরণ
<!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="The Top border style is now changed";
}
</script>
</head>
<body>
<div id="DIV1">SOME SAMPLE TEXT</div>
<p>Change the above div Top border style by clicking the below button</p>
<button onclick="changeTopStyle()">Change Top Style</button>
<p id="Sample"></p>
</body>
</html> আউটপুট
"শীর্ষ শৈলী পরিবর্তন করুন ক্লিক করলে৷ ” বোতাম -
উপরের উদাহরণে -
আমরা প্রথমে "DIV1" আইডি দিয়ে একটি ডিভি তৈরি করেছি এবং এটির আইডির উপর ভিত্তি করে এটিতে একটি CSS শৈলী প্রয়োগ করেছি। শৈলীতে বর্ডার-শীর্ষ শৈলী এবং এর প্রস্থ প্রধানত −
রয়েছে#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()">Change Top Style</button>
changeTopStyle() পদ্ধতি getElementById() ব্যবহার করে "DIV1" আইডি সহ div উপাদান পায় এবং এর বর্ডারTopStyle শৈলী বৈশিষ্ট্য ড্যাশ করে সেট করে। এই পরিবর্তনটি তারপর আইডি "নমুনা" সহ অনুচ্ছেদে প্রতিফলিত হয় প্রদত্ত পাঠটি তার অভ্যন্তরীণ HTML বৈশিষ্ট্য ব্যবহার করে প্রদর্শন করে৷
function changeTopStyle(){
document.getElementById("DIV1").style.borderTopStyle="dashed";
document.getElementById("Sample").innerHTML="The Top border style is now changed";
} 