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

HTML DOMのol要素startプロパティとは？使い方とサンプルコードを解説

ol要素のstartプロパティとは

HTML DOMにおけるol要素のstartプロパティは、順序付きリスト（番号付きリスト）のstart属性の値を取得、または設定するためのプロパティです。

start属性を利用することで、リストの採番を「1」以外の任意の数字から開始できます。JavaScriptからこのプロパティを操作すれば、動的にリストの開始番号を変更することが可能です。

構文（シンタックス）

開始番号の値を取得する場合

olObject.start

開始番号に数値を設定する場合

olObject.start = number

サンプルコード

それでは、ol要素のstartプロパティの具体的な使用例を見ていきましょう。以下の例では、「Correct list（リストを修正）」ボタンをクリックすると、開始番号が「2」のリストが「1」から始まるように修正されます。

例

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol start</title>
<style>
    form {
        width:70%;
        margin: 0 auto;
        text-align: center;
    }
    * {
        padding: 2px;
        margin:5px;
    }
    input[type="button"] {
        border-radius: 10px;
    }
    ol{
        width: 30%;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <form>
        <fieldset>
            <legend>HTML-DOM-Ol-start</legend>
            <h3>Students</h3>
            <ol id="orderList" start='2'>
                <li>Zampa</li>
                <li>Rajesh</li>
                <li>Eden</li>
                <li>Bina</li>
                <li>Alex</li>
                <li>Adam</li>
            </ol>
            <input type="button" onclick="reverseNumbering()" value="Correct list">
            <div id="divDisplay"></div>
        </fieldset>
    </form>
<script>
    var divDisplay = document.getElementById("divDisplay");
    var studentList = document.getElementById("orderList");
    function reverseNumbering() {
        studentList.start = '1';
        divDisplay.textContent = 'List Corrected';
    }
</script>
</body>
</html>

実行結果

「Correct list」ボタンをクリックする前

リストの開始番号が「2」から表示されています。

HTML DOMのol要素startプロパティとは？使い方とサンプルコードを解説

「Correct list」ボタンをクリックした後

startプロパティに「1」が設定され、リストが「1」からの採番に修正されます。

HTML DOMのol要素startプロパティとは？使い方とサンプルコードを解説

まとめ

ol要素のstartプロパティを使えば、順序付きリストの開始番号をJavaScriptから自由に読み取り・変更できます。ページの状態に応じて採番を動的に切り替えたい場合などに活用すると便利です。

  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> などのテーブル関連要素が基準にな