HTML DOM Columnオブジェクトとは？
HTML DOMのColumnオブジェクトは、HTMLの<col>要素と関連付けられたオブジェクトです。このオブジェクトを使用することで、<col>要素のプロパティを取得したり設定したりすることができます。なお、<col>タグは
| プロパティ | 説明 |
|---|---|
| span | 列のspan属性値を設定または取得します。 |
構文
Columnオブジェクトを作成する場合の基本構文は以下の通りです。
var a = document.createElement("COL");実行例
ここで、Columnオブジェクトの具体的な使用例を見てみましょう。
<!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>下のボタンをクリックすると、「COL1」のcol要素のspan値を取得できます</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>出力結果
上記のコードを実行すると、次のような出力が得られます。
COLUMNボタンをクリックした後の表示は以下の通りです。
コードの解説
この例では、まず2行3列のテーブルを作成し、テーブル全体にスタイルを適用しています。テーブル内部には2つの 最初の 次に、クリックされるとcolObj()メソッドを実行する「COLUMN」ボタンを作成しています。 colObj()メソッドでは、documentオブジェクトのgetElementById()メソッドを使って最初の
HTML DOM の HR オブジェクトは、HTML 文書内の <hr> 要素を表すオブジェクトです。<hr> 要素は、コンテンツの話題やテーマの区切りを視覚的に示す水平線（罫線）として表示されます。JavaScript を使えば、この水平線を動的に生成してページに挿入することも可能です。ここでは、HR オブジェクトの基本的な作成方法と実践的な使用例を紹介します。HRオブジェクトの作成方法（構文）hr オブジェクトを新しく作成するには、document.createElement() メソッドを使用します。構文は以下のとおりです。document.createEleme
HTML DOM の Ul オブジェクトは、HTML の <ul>（順序なしリスト）要素を表すオブジェクトです。JavaScript を使うことで、リストの動的な生成や操作が可能になります。
<ul> 要素の作成方法
新しい <ul> 要素を作成するには、document.createElement() メソッドを使用します。
var ulObject = document.createElement(UL)
HTML5で非推奨となったプロパティ
ulObject には以下のプロパティが存在しますが、これらは HTML5 ではサポートされていないため注 <col>要素が配置されており、片方には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><col>要素はspan=2に設定されているため、そのスタイルは正確に2つの列に適用されます。そして、2つ目の<col>要素のスタイルは残りの列に適用される仕組みです。<button onclick="colObj()">COLUMN</button>
<col>要素を取得します。続いて、その<col>要素のspan属性値を変数xに代入します。最後に、変数xに格納されたspan属性の値を、段落要素のinnerHTMLプロパティを使ってidが「Sample」の段落内に表示しています。function colObj() {
var x = document.getElementById("Col1").span;
document.getElementById("Sample").innerHTML = "The Col1 element has span= "+x;
}