HTML DOM কলাম অবজেক্ট

HTML DOM কলাম অবজেক্টটি HTML উপাদানের সাথে যুক্ত। কলাম অবজেক্ট উপাদানের বৈশিষ্ট্য পেতে বা সেট করতে ব্যবহৃত হয়। ট্যাগ শুধুমাত্র একটি

উপাদানের ভিতরে ব্যবহার করা হয়।

সম্পত্তি

কলাম অবজেক্ট -

এর জন্য নিম্নোক্ত সম্পত্তি

সম্পত্তি	বিবরণ
স্প্যান	একটি কলামের স্প্যান অ্যাট্রিবিউট মান সেট করতে বা ফেরত দিতে।

সিনট্যাক্স

−

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

একটি কলাম অবজেক্ট তৈরি করা হচ্ছে -

var a = document.createElement("COL");

উদাহরণ

কলাম অবজেক্ট -

এর জন্য একটি উদাহরণ দেখা যাক

<!DOCTYPE html>
<html>
<head>
<style>
   table, th, td {
      border: 1px solid blue;
   }
   #Col1{
      background-color:pink;
   }
</style>
</head>
<body>
<h3>COL OBJECT</h3>
<table>
<colgroup>
<col id="Col1" span="2">
<col style="background-color:lightgreen">
</colgroup>
<tr>
<th>Fruit</th>
<th>Color</th>
<th>Price</th>
</tr>
<tr>
<td>Mango</td>
<td>Yellow</td>
<td>100Rs</td>
</tr>
<tr>
<td>Guava</td>
<td>Green</td>
<td>50Rs</td>
</tr>
</table>
<p>Click the below button to get span of the "COL1" col element</p>
<button onclick="colObj()">COLUMN</button>
<p id="Sample"></p>
<script>
   function colObj() {
      var x = document.getElementById("Col1").span;
      document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x;
   }
</script>
</body>
</html>

আউটপুট

এটি নিম্নলিখিত আউটপুট −

তৈরি করবে

HTML DOM কলাম অবজেক্ট

COLUMN বোতাম-

-এ ক্লিক করলে

HTML DOM কলাম অবজেক্ট

উপরের উদাহরণে আমরা 2টি সারি এবং 3টি কলাম সহ একটি টেবিল তৈরি করেছি। সামগ্রিকভাবে টেবিলটিতে একটি শৈলী প্রয়োগ করা হয়েছে। টেবিলের ভিতরে, আমাদের দুটি উপাদান রয়েছে যার একটি স্প্যান 2 এর সমান এবং অন্যটিতে একটি ইনলাইন স্টাইল প্রয়োগ করা হয়েছে। যেহেতু প্রথম স্প্যানটি 2 এর সমান, তাই এর স্টাইলটি ঠিক দুটি কলামে প্রযোজ্য হবে এবং দ্বিতীয়টি বাকি কলামগুলিতে এর স্টাইল প্রয়োগ করবে −

table, th, td {
   border: 1px solid blue;
}
#Col1{
   background-color:pink;
}
<table>
<colgroup>
<col id="Col1" span="2">
<col style="background-color:lightgreen">
</colgroup>
<tr>
<th>Fruit</th>
<th>Color</th>
<th>Price</th>
</tr>
<tr>
<td>Mango</td>
<td>Yellow</td>
<td>100Rs</td>
</tr>
<tr>
<td>Guava</td>
<td>Green</td>
<td>50Rs</td>
</tr>
</table>

তারপরে আমরা একটি বোতাম COLUMN তৈরি করেছি যা ব্যবহারকারী দ্বারা ক্লিক করার সময় colObj() পদ্ধতিটি কার্যকর করবে −

<button onclick="colObj()">COLUMN</button>

colObj() পদ্ধতি নথি বস্তুতে getElementById() পদ্ধতি ব্যবহার করে প্রথম উপাদান পায়। এটি তারপর উপাদানটির span বৈশিষ্ট্য মান পায় এবং এটি পরিবর্তনশীল x এ বরাদ্দ করে। স্প্যান অ্যাট্রিবিউট মান যা ভেরিয়েবল x-এ সংরক্ষিত থাকে তা অনুচ্ছেদের অভ্যন্তরীণ HTML বৈশিষ্ট্য ব্যবহার করে "নমুনা" আইডি সহ অনুচ্ছেদে প্রদর্শিত হয় −

function colObj() {
   var x = document.getElementById("Col1").span;
   document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x;
}