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

HTML DOM ColumnGroup の span プロパティとは？使い方を解説

概要

HTML DOM の ColumnGroup span プロパティは、HTML の <colgroup> 要素が持つ span 属性に関連付けられたプロパティです。このプロパティを使うことで、列グループ（<colgroup>）の span 属性の値を設定または取得できます。span 属性は、<colgroup> 要素が何列分にまたがって適用されるかを定義するために使用されます。

構文

ColumnGroup span プロパティの構文は以下の通りです。

値を設定する場合

columngroupObject.span = number

ここで number には、<colgroup> 要素がまたがるべき列数を指定します。

サンプルコード

それでは、ColumnGroup span プロパティの具体的な使用例を見てみましょう。

<!DOCTYPE html>
<html>
<head>
<style>
    table, th, td {
        border: 1px solid blue;
    }
</style>
</head>
<body>
<table>
<colgroup id="Colgroup1"></colgroup>
<tr>
<th>Fruit</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>watermelon</td>
<td>dark green</td>
<td>40Rs</td>
</tr>
<tr>
<td>papaya</td>
<td>yellow</td>
<td>30Rs</td>
</tr>
</table>
<p>ボタンをクリックすると、最初の 2 列の背景色が変わります。
<button onclick="changeColor()">CHANGE</button>
<script>
    function changeColor() {
        document.getElementById("Colgroup1").span = "2";
        document.getElementById("Colgroup1").style.backgroundColor = "lightgreen";
    }
</script>
</body>
</html>

実行結果

上記のコードを実行すると、次のような画面が表示されます。

HTML DOM ColumnGroup の span プロパティとは？使い方を解説

続いて、「CHANGE」ボタンをクリックした後の表示はこちらです。

HTML DOM ColumnGroup の span プロパティとは？使い方を解説

コードの解説

上記の例では、以下のような処理を行っています。

1. テーブルとスタイルの作成

まず、2 行 3 列のテーブルを作成し、table・th・td 要素に対して青色の枠線スタイルを適用しています。

table, th, td {
    border: 1px solid blue;
}
<table>
<colgroup id="Colgroup1"></colgroup>
<tr>
<th>Fruit</th>
<th>COLOR</th>
<th>Price</th>
</tr>
<tr>
<td>watermelon</td>
<td>dark green</td>
<td>40Rs</td>
</tr>
<tr>
<td>papaya</td>
<td>yellow</td>
<td>30Rs</td>
</tr>
</table>

2. ボタンの設置

次に、ユーザーがクリックすると changeColor() メソッドを実行する「CHANGE」ボタンを作成しています。

<button onclick="changeColor()">CHANGE</button>

3. changeColor() 関数の処理内容

changeColor() 関数では、getElementById() メソッドの引数に <colgroup> 要素の id を渡して対象要素を取得します。その後、<colgroup> 要素の span を「2」に設定し、背景色を薄い緑（lightgreen）に変更します。これにより、span 属性で指定された通り、テーブルの左から 2 列分の背景が緑色に変わります。

function changeColor() {
    document.getElementById("Colgroup1").span = "2";
    document.getElementById("Colgroup1").style.backgroundColor = "lightgreen";
}
  1. HTML DOMのol要素startプロパティとは？使い方とサンプルコードを解説

    ol要素のstartプロパティとは HTML DOMにおけるol要素のstartプロパティは、順序付きリスト（番号付きリスト）のstart属性の値を取得、または設定するためのプロパティです。 start属性を利用することで、リストの採番を「1」以外の任意の数字から開始できます。JavaScriptからこのプロパティを操作すれば、動的にリストの開始番号を変更することが可能です。 構文（シンタックス） 開始番号の値を取得する場合 olObject.start 開始番号に数値を設定する場合 olObject.start = number サンプルコード それでは、ol要素のstartプロパティの

  2. HTML DOM Ol reversedプロパティとは？リストの降順・昇順を切り替える方法を解説

    HTML DOMのOl reversedプロパティは、順序付きリスト（<ol>要素）の番号を降順にするか、昇順（デフォルト）にするかを設定・取得するためのプロパティです。JavaScriptから動的にリストの番号付けの方向を変更したい場合に活用できます。構文ブール値（true / false）を取得する場合olObject.reversedreversedプロパティにブール値を設定する場合olObject.reversed = booleanValueここで指定できる「booleanValue」の値と意味は以下の通りです。booleanValue説明trueリストの番号が降順で表示