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

HTML DOMColumnGroupspanプロパティ

HTML DOM ColumnGroup spanプロパティは、HTML 要素のspan属性に関連付けられています。 ColumnGroup spanプロパティは、列グループのspan属性の値を設定または返します。 span属性は、 要素がスパンする列の数を定義するために使用されます。

構文

以下は、-

の構文です。

ColumnGroupスパンプロパティの設定-

columngroupObject.span = number

ここで、数値は 要素がまたがる列の数を指定します。

例

ColumnGroupspanプロパティの例を見てみましょう-

<!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>lick the button to change the background color of the first two columns.
<button onclick="changeColor()">CHANGE</button>
<script>
   function changeColor() {
      document.getElementById("Colgroup1").span = "2";
      document.getElementById("Colgroup1").style.backgroundColor = "lightgreen";
   }
</script>
</body>
</html>

出力

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

HTML DOMColumnGroupspanプロパティ

変更ボタンをクリックすると-

HTML DOMColumnGroupspanプロパティ

上記の例では-

2行3列のテーブルを作成しました。テーブル、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>

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

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

changeColor（）関数は、getElementById（）メソッドを使用して 要素を取得し、パラメーターとして 要素IDを指定します。次に、 要素のスパンを2に設定し、背景色を緑に変更します。これにより、 要素のspan属性で指定されているように、左から最初の2列が緑色になります。

function changeColor() {
   document.getElementById("Colgroup1").span = "2";
   document.getElementById("Colgroup1").style.backgroundColor = "lightgreen";
}

  1. HTML DOMOlstartプロパティ

    HTML DOM Ol startプロパティは、順序付きリストのstart属性の値を設定/返します。 以下は構文です- 数値を返す olObject.start 開始の設定 番号に olObject.start = number Ol startの例を見てみましょう プロパティ- 例 <!DOCTYPE html> <html> <head> <title>HTML DOM Ol start</title> <style>    form {       widt

  2. HTMLDOMOl反転プロパティ

    HTML DOM Olの逆プロパティは、リストの順序を降順にするか昇順にするかを設定/返します（デフォルト）。 以下は構文です- ブール値を返す-true/false olObject.reversed 反転の設定 booleanValueへ olObject.reversed = booleanValue ここでは、「booleanValue」 次のようになります- booleanValue 詳細 true 順序が降順になることを定義します false デフォルトで順序が昇順になることを定義します Ol反転の例を見てみましょう