HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLDOM列オブジェクト

HTML DOM Columnオブジェクトは、HTMLの要素に関連付けられています。 Columnオブジェクトは、要素のプロパティを取得または設定するために使用されます。 タグは、

要素内でのみ使用されます。

プロパティ

以下は、列オブジェクトのプロパティです-

プロパティ 説明
スパン 列のスパン属性値を設定または返すため。

構文

以下は、-

の構文です。

列オブジェクトの作成-

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>

出力

これにより、次の出力が生成されます-

HTMLDOM列オブジェクト

COLUMNボタンをクリックすると-

HTMLDOM列オブジェクト

上記の例では、2行3列のテーブルを作成しました。テーブル全体にスタイルが適用されています。テーブル内には2つの要素があり、1つはスパンが2に等しく、もう1つはインラインスタイルが適用されています。最初のスパンは2に等しいため、そのスタイルは正確に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>

次に、ユーザーがクリックしたときにcolObj（）メソッドを実行するボタンCOLUMNを作成しました-

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

colObj（）メソッドは、ドキュメントオブジェクトでgetElementById（）メソッドを使用して、最初の要素を取得します。次に、要素のspan属性値を取得し、それを変数xに割り当てます。変数xに格納されているスパン属性値は、段落のinnerHTMLプロパティを使用して、IDが「Sample」の段落に表示されます-

function colObj() {
   var x = document.getElementById("Col1").span;
   document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x;
}
があります
  1. HTMLDOMHRオブジェクト

    HTML DOM HRオブジェクトは、HTMLドキュメントの要素を表します。 hrオブジェクトを作成- 構文 以下は構文です- document.createElement(“HR”); hrオブジェクトの例を見てみましょう- 例 <!DOCTYPE html> <html> <style>    body {       text-align: center;       background-color: #fff;    

  2. HTMLDOMUlオブジェクト

    HTMLのHTMLDOMUlオブジェクトは、 を表します 要素。 を作成する 要素 var ulObject = document.createElement(“UL”) ここでは、「ulObject」 次のプロパティを持つことができますが、 HTML5ではサポートされていません − プロパティ 説明 コンパクト 順不同リストを通常より小さく表示するかどうかを設定/返します タイプ 順序付けされていないリストのtype属性の値を設定/返します 順不同リストの例を見てみましょう 要素- 例 <!DOCTYPE