HTML DOM বর্ডারটপ প্রপার্টি একটি এলিমেন্টের জন্য টপ বর্ডার প্রপার্টি পেতে বা সেট করার জন্য একটি সংক্ষেপে ব্যবহৃত হয়। বর্ডারটপ প্রপার্টিতে বর্ডার-টপ-প্রস্থ, বর্ডার-টপ-স্টাইল, বর্ডার-টপ-রং রয়েছে।
−
-এর সিনট্যাক্স নিচে দেওয়া হলবর্ডার টপ প্রপার্টি সেট করা হচ্ছে:
object.style.borderTop = "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="The Top border for the paragraph element is now changed ";
}
</script>
</head>
<body>
<p id="P1">This is some sample text inside the paragraph. Here is another line of this sample text</p>
<p>Change the above paragraph Top border properties by clicking the below button</p>
<button onclick="changeBorderTop()">Change Border Top</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()">Change Border Top</button>
changeBorderTop() ফাংশন getElementById() পদ্ধতি ব্যবহার করে id “P1” সহ অনুচ্ছেদ উপাদানের বর্ডারটপ স্টাইল প্রপার্টি পায় এবং এর প্রপার্টির মান পরিবর্তন করে ‘9px ড্যাশড রেড’। এই পরিবর্তনের নির্দেশক একটি বার্তা তারপর অনুচ্ছেদে প্রদর্শিত হয় আইডি "নমুনা" এর অভ্যন্তরীণ HTML বৈশিষ্ট্য ব্যবহার করে −
function changeBorderTop(){
document.getElementById("P1").style.borderTop="9px dashed red";
document.getElementById("Sample").innerHTML="The top border for the paragraph element is now changed";
} 