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

HTML DOM Styleのorderプロパティとは？構文と使い方を実例付きで解説

HTML DOM の Style order プロパティは、HTML 文書内で同じフレックスコンテナに属する他のアイテムと比較した、フレックスアイテムの表示順序を取得（参照）および変更するために使用されます。

Flexbox レイアウトでは、HTML 上の記述順に関係なく、order プロパティの値が小さいアイテムほど先頭に配置されます。JavaScript から動的に順序を制御したい場合に非常に便利なプロパティです。

構文

order プロパティの構文は以下のとおりです。

1. 順序の取得

object.order

2. 順序の変更

object.order = "value"

value には以下の値を指定できます。

値説明
initialこのプロパティの値をデフォルト値（0）に設定します。
inherit親要素からこのプロパティの値を継承します。
numberフレックスアイテムの表示順序を指定する数値です。デフォルトは 0 で、小さい値ほど先に表示されます。負の値も指定可能です。

サンプルコード

それでは、HTML DOM Style order プロパティの具体的な使用例を見てみましょう。

例

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 40%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .container {
        border: 3px solid #fff;
        margin: 1rem auto;
        display: flex;
        padding: 2rem;
    }
    .box {
        width: 100px;
        height: 100px;
    }
</style>
<body>
<h1 style="text-align:center">DOM Style order Property Demo</h1>
<div class="container">
<div class="box" id="b1" style="background-color:#7F055F;"></div>
<div class="box" id="b2" style="background-color:#3A015C;"></div>
<div class="box" id="b3" style="background-color:#177E89;"></div>
</div>
<button onclick="set()" class="btn">Change order</button>
<script>
    function set() {
        document.querySelector('#b1').style.order = "3";
        document.querySelector('#b2').style.order = "2";
        document.querySelector('#b3').style.order = "1";
    }
</script>
</body>
</html>

出力結果

HTML DOM Styleのorderプロパティとは？構文と使い方を実例付きで解説

上記のコードを実行すると、白い枠線のフレックスコンテナ内に3つの色付きボックスが横並びで表示されます。

ここで「Change order」ボタンをクリックしてみてください。

HTML DOM Styleのorderプロパティとは？構文と使い方を実例付きで解説

ボタンをクリックすると、set() 関数によって各ボックスの order 値が設定され、白い枠線のコンテナ内にあるフレックスアイテムの並び順が変更されます。具体的には、元々左端にあった紫のボックス（#b1）が右端へ移動し、緑色のボックス（#b3）が左端に表示されるようになります。

まとめ

Style order プロパティを使えば、JavaScript からフレックスアイテムの表示順序を動的に操作できます。ドラッグ＆ドロップによる並べ替え機能や、レスポンシブデザインでの要素の入れ替えなど、さまざまな場面で活用できるので、ぜひ覚えておきましょう。

  1. HTML DOM スタイルの transformOrigin プロパティとは？使い方を徹底解説

    HTML DOM のスタイルオブジェクトが持つ transformOrigin プロパティは、HTML ドキュメント内の要素に対して 2D または 3D 変換を行う際の「原点（基準点）」を取得・設定するためのプロパティです。要素を回転や拡大縮小させる transform プロパティと組み合わせて使うことで、変換の基準となる位置を自由にコントロールできます。構文（シンタックス）transformOrigin プロパティの基本的な構文は以下のとおりです。値の取得object.style.transformOrigin値の設定object.style.transformOrigin = 値指定できる

  2. HTML DOM スタイルの quotes プロパティの使い方を徹底解説

    HTML DOM の style オブジェクトの quotes プロパティは、HTML ドキュメント内で引用文を囲むために使用される引用符（クォーテーションマーク）の種類を取得・変更するためのプロパティです。主に <q> 要素や <blockquote> 要素など、引用を表す要素と組み合わせて利用されます。 構文 quotes プロパティの基本的な構文は以下のとおりです。 値の取得 object.style.quotes 値の設定 object.style.quotes = value 設定できる値 value には以下の値を指定できます。 値説明 inheri