HTML DOM TableDataのheadersプロパティとは？使い方をサンプルコード付きで解説
HTML DOM の TableData オブジェクトが持つ headers プロパティは、HTML ドキュメント内のテーブルセル（td 要素）に設定された headers 属性の値を取得・変更するために使用されるプロパティです。
headers 属性は、そのセルがどの見出しセル（th 要素）と関連しているかを示すものです。スクリーンリーダーなどの支援技術がテーブルの内容を正しく読み上げるために役立つ、アクセシビリティ向上のための重要な属性です。
構文
headers プロパティの基本構文は以下のとおりです。
1. headers 属性の値を取得する場合
object.headers
2. headers 属性の値を設定する場合
object.headers = "header_ids"
続いて、headers プロパティを使った具体的な使用例を見ていきましょう。
サンプルコード
<!DOCTYPE html>
<html>
<style>
body {
color: #000;
background: lightblue;
height: 100vh;
text-align: center;
}
table {
margin: 2rem auto;
width: 400px;
}
.btn {
background: #db133a;
border: none;
height: 2rem;
border-radius: 2px;
width: 40%;
display: block;
color: #fff;
outline: none;
cursor: pointer;
margin: 1rem auto;
}
.show {
font-size: 1.2rem;
}
</style>
<body>
<h1>DOM TableData headers プロパティのデモ</h1>
<table border="2">
<thead>
<tr>
<th>名前</th>
<th>出席番号</th>
</tr>
</thead>
<tbody>
<tr>
<td headers="Name">John</td>
<td headers="Rollno">071717</td>
</tr>
<tr>
<td headers="Name: Jane" id="jane-data">Jane</td>
<td headers="Rollno">031717</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">headers の値を表示</button>
<div class="show"></div>
<script>
function get() {
document.querySelector(".show").innerHTML = document.querySelector('#jane-data').headers;
}
</script>
</body>
</html>
実行結果
上記のコードを実行すると、ブラウザには次のような画面が表示されます。
「headers の値を表示」ボタンをクリックすると、Jane の行にあるセルに設定された headers 属性の値が画面に表示されます。
-
HTML DOM Ol typeプロパティとは？順序付きリストのマーカー種類を変更する方法
HTML DOM の Ol type プロパティは、順序付きリスト（<ol> 要素）で使用されるマーカーの種類に対応する type 属性の値を、取得または設定するためのプロパティです。このプロパティを使うことで、JavaScript から動的にリストの番号スタイル（数字、アルファベット、ローマ数字など）を変更できます。 Ol type プロパティの構文 type プロパティの値を取得する場合 olObject.type type プロパティに値を設定する場合 olObject.type = 1|a|A|i|I; type 属性には以下の5種類の値を指定できます。 1 … 数字（1
-
HTML DOMのol要素startプロパティとは？使い方とサンプルコードを解説
ol要素のstartプロパティとは HTML DOMにおけるol要素のstartプロパティは、順序付きリスト（番号付きリスト）のstart属性の値を取得、または設定するためのプロパティです。 start属性を利用することで、リストの採番を「1」以外の任意の数字から開始できます。JavaScriptからこのプロパティを操作すれば、動的にリストの開始番号を変更することが可能です。 構文（シンタックス） 開始番号の値を取得する場合 olObject.start 開始番号に数値を設定する場合 olObject.start = number サンプルコード それでは、ol要素のstartプロパティの