কম্পিউটার

এইচটিএমএল ডম স্টাইল বর্ডার রাইট প্রপার্টি


HTML DOM বর্ডার রাইট প্রপার্টি একটি এলিমেন্টের জন্য রাইট বর্ডার প্রপার্টি পেতে বা সেট করার জন্য একটি সংক্ষেপে ব্যবহৃত হয়। বর্ডার রাইট প্রপার্টিতে বর্ডার-ডান-প্রস্থ, বর্ডার-ডান-স্টাইল, বর্ডার-ডান-রং রয়েছে।

-এর সিনট্যাক্স নিচে দেওয়া হল

বর্ডার সেট করা হচ্ছে রাইট প্রপার্টি:

object.style.borderRight = "width style color|initial|inherit"

উপরের বৈশিষ্ট্যগুলি নিম্নরূপ ব্যাখ্যা করা হয়েছে -

প্যারামিটার বিবরণ
প্রস্থ ডান সীমানা প্রস্থ সেট করার জন্য।
স্টাইল ডান সীমানা শৈলী সেট করার জন্য।
রঙ ডান সীমানার রঙ সেট করার জন্য।
প্রাথমিক এই সম্পত্তি ডিফল্ট মান সেট করার জন্য।
উত্তরাধিকার অভিভাবক সম্পত্তি মান উত্তরাধিকারসূত্রে পেতে।

আসুন আমরা বর্ডার রাইট প্রপার্টি -

এর একটি উদাহরণ দেখি

উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
   #P1 {
      border-Right: 4px solid magenta;
      font-size: 1.5rem;
   }
</style>
<script>
   function changeBorderRight(){
      document.getElementById("P1").style.borderRight="9px dashed red";
      document.getElementById("Sample").innerHTML="The Right border for the paragraph element is now";
   }
</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 Right border properties by clicking the below button</p>
<button onclick="changeBorderRight()">Change Border Right</button>
<p id="Sample"></p>
</body>
</html>

আউটপুট

এইচটিএমএল ডম স্টাইল বর্ডার রাইট প্রপার্টি

"চেঞ্জ বর্ডার রাইট" বোতামে ক্লিক করলে -

এইচটিএমএল ডম স্টাইল বর্ডার রাইট প্রপার্টি

উপরের উদাহরণে -

আমরা প্রথমে "P1" আইডি সহ একটি অনুচ্ছেদ তৈরি করেছি যাতে এটির ভিতরে কিছু পাঠ্য রয়েছে এবং এটিতে একটি অনুরূপ CSS শৈলী প্রয়োগ করা হয়েছে৷

#P1 {
   border-Right: 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>

তারপরে আমরা একটি বোতাম "চেঞ্জ বর্ডার রাইট" তৈরি করেছি যা ব্যবহারকারীর দ্বারা ক্লিক করার পরে changeBorderRight() ফাংশনটি কার্যকর করবে৷

pre class="result notranslate">
<button onclick="changeBorderRight()">Change Border Right</button>

changeBorderRight() ফাংশন getElementById() পদ্ধতি ব্যবহার করে id “P1” সহ অনুচ্ছেদ উপাদানের বর্ডাররাইট স্টাইল প্রপার্টি পায় এবং এর সম্পত্তির মান পরিবর্তন করে ‘9px ড্যাশড রেড’। এই পরিবর্তনের ইঙ্গিত দেয় এমন একটি বার্তা তারপর তার অভ্যন্তরীণ এইচটিএমএল বৈশিষ্ট্য ব্যবহার করে "নমুনা" আইডি সহ অনুচ্ছেদে প্রদর্শিত হয়৷

function changeBorderRight(){
   document.getElementById("P1").style.borderRight="9px dashed red";
   document.getElementById("Sample").innerHTML="The right border for the paragraph element is now ";
}

  1. এইচটিএমএল ডম স্টাইল বর্ডার টপস্টাইল প্রপার্টি

  2. এইচটিএমএল ডম স্টাইল বর্ডার স্টাইল প্রপার্টি

  3. এইচটিএমএল ডম স্টাইল বর্ডার রাইটস্টাইল প্রপার্টি

  4. এইচটিএমএল ডম স্টাইল বর্ডার রাইট প্রপার্টি