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

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

HTML DOMのOl reversedプロパティは、順序付きリスト（<ol>要素）の番号を降順にするか、昇順（デフォルト）にするかを設定・取得するためのプロパティです。JavaScriptから動的にリストの番号付けの方向を変更したい場合に活用できます。

構文

ブール値（true / false）を取得する場合

olObject.reversed

reversedプロパティにブール値を設定する場合

olObject.reversed = booleanValue

ここで指定できる「booleanValue」の値と意味は以下の通りです。

booleanValue説明
trueリストの番号が降順で表示されます。
falseリストの番号が昇順で表示されます（デフォルト）。

サンプルコード

それでは、Ol reversedプロパティの具体的な使用例を見てみましょう。ボタンをクリックすると、生徒名のリストの番号が降順に切り替わるサンプルです。

例

<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Ol reversed</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-reversed</legend>
            <h3>Students</h3>
            <ol id="orderList">
                <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.reversed = true;
        divDisplay.textContent = 'List Corrected';
    }
</script>
</body>
</html>

実行結果

「Correct list」ボタンをクリックする前は、リストは通常どおり昍順（1、2、3…）で表示されます。

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

「Correct list」ボタンをクリックした後は、reversedプロパティがtrueに設定され、リストの番号が降順（6、5、4…）に切り替わります。

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

まとめ

Ol reversedプロパティを使えば、HTMLを書き換えることなく、JavaScriptだけで順序付きリストの番号を昇順・降順に簡単に切り替えることができます。ランキングやカウントダウン形式のリストなど、動的な表示切り替えが必要な場面でぜひ活用してください。

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

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

  2. HTML DOM titleプロパティとは？使い方とサンプルコードを解説

    HTML DOM titleプロパティとはHTML DOMのtitleプロパティは、HTML要素のtitle属性に対応する文字列を取得（戻り値として返す）したり、設定したりするためのプロパティです。title属性に値が設定されている場合、その要素にマウスカーソルを重ねると、ツールチップとしてテキストが表示されます。この動的な挙動をJavaScriptから制御できるのが、titleプロパティの役割です。構文title属性の値を取得する場合：ElementOfHTMLObject.titletitle属性に文字列を設定する場合：ElementOfHTMLObject.title = string使