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

HTML DOM TableHeader abbrプロパティの使い方を解説！取得・設定の方法とサンプルコード

TableHeader abbrプロパティとは

HTML DOM の TableHeader abbr プロパティは、HTML ドキュメント内のテーブルヘッダーセル（th 要素）に設定された abbr 属性の値を取得・変更するために使用されるプロパティです。

abbr 属性は、ヘッダーセルの内容を短縮した略称を指定するためのものです。スクリーンリーダーなどの支援技術がテーブルを読み上げる際にこの省略形が利用されるため、アクセシビリティの向上にも役立ちます。

構文

abbr プロパティの基本的な構文は以下のとおりです。

1. abbr の値を取得する場合

object.abbr

2. abbr の値を設定する場合

object.abbr = "text"

サンプルコード

それでは、abbr プロパティの具体的な使用例を見ていきましょう。次の例では、ボタンをクリックすると、テーブル内の特定のセルに設定された abbr 属性の値が画面に表示されます。

<!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;
    }
</style>
<body>
<h1>DOM TableHeader abbr Property Demo</h1>
<table border="2">
<thead>
<tr>
<th>Name</th>
<th>Language</th>
</tr>
</thead>
<tbody>
<tr>
<td id="john">John</td>
<td abbr="Eng" id="john-lang">English</td>
</tr>
<tr>
<td id="elon">Elon</td>
<td abbr="Ger" id="elon-lang">Germany</td>
</tr>
</tbody>
</table>
<button onclick="get()" class="btn">Show abbr Value</button>
<div class="show"></div>
<script>
    function get() {
        document.querySelector(".show").innerHTML = "abbr for English: " + document.querySelector("#john-lang").abbr;
    }
</script>
</body>
</html>

実行結果

ブラウザで上記のコードを実行すると、見出し・テーブル・ボタンが表示されたページが出力されます。

HTML DOM TableHeader abbrプロパティの使い方を解説！取得・設定の方法とサンプルコード

続いて、「Show abbr Value」ボタンをクリックしてみましょう。クリックすると、id が「john-lang」であるセルに設定された abbr 属性の値（Eng）が画面に表示されます。

HTML DOM TableHeader abbrプロパティの使い方を解説！取得・設定の方法とサンプルコード

まとめ

TableHeader の abbr プロパティを使えば、JavaScript から動的に th 要素の abbr 属性を読み取ったり書き換えたりすることができます。テーブルのアクセシビリティを高めたい場合や、ヘッダー情報をプログラムで管理したい場合にぜひ活用してみてください。

  1. HTML DOM offsetWidthプロパティの使い方をわかりやすく解説

    HTML DOM offsetWidthプロパティとは HTML DOMのoffsetWidthプロパティは、要素の実際の表示幅に対応する数値(ピクセル単位の整数)を返します。この幅にはパディング・ボーダー(境界線)・スクロールバーが含まれますが、マージンは含まれません。なお、offsetWidthは読み取り専用のプロパティのため、値を直接代入することはできません。 構文 HTMLElement.offsetWidth 要素が非表示(display: none など)の状態にある場合は、0 が返されます。 関連プロパティとの違い offsetWidth: パディング+ボーダー+スクロールバー

  2. 【初心者向け】HTML DOMのoffsetParentプロパティの使い方とサンプルコード

    offsetParentプロパティとは HTML DOM の offsetParent プロパティは、対象要素のオフセット（相対的な位置）がどの親要素を基準として定義されているかを示し、その基準となる親要素への参照を返します。 具体的には、CSS の position プロパティ（relative / absolute / fixed / sticky）が指定された最も近い祖先要素が基準となります。該当する要素が存在しない場合は <body> 要素が返されます。また、テーブルセル内の要素であれば <td> や <table> などのテーブル関連要素が基準にな