HTML - DOM Style Object order Property

Quiz

HTML DOM Style Object order property sets or returns order of the flexible items relative to flex items in same container.

Syntax

Set the order property:

object.style.order= "number | initial | inherit";

Get the order property:

object.style.order;

Property Values

Value	Description
number	It specifies order of flex items. It's default value is 0.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

This returns the order of the property.

Example of HTML DOM Style Object 'order' Property

The following example sets the order of flex items.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object order Property
    </title>
    <style>
        #flex {
            width: 500px;
            height: 200px;
            border: 1px solid black;
            display: flex;
        }
        #flex div {
            height: 80px;
            width: 80px;
        }
    </style>
</head>
<body>
    <p>Click to apply order property.</p>
    <button onclick="fun()">Set Order</button>
    <br>
    <div id="flex">
        <div style="background-color: #04af2f;" id="one">1</div>
        <div style="background-color: aqua;" id="two">2</div>
        <div style="background-color: yellow;" id="three">3</div>
        <div style="background-color: whitesmoke" id="four">4</div>
        <div style="background-color: black;" id="five">5</div>
    </div>
    <script>
        function fun() {
            document.getElementById("one")
                .style.order = "5"
            document.getElementById("two")
                .style.order = "3"
            document.getElementById("three")
                .style.order = "2"
            document.getElementById("four")
                .style.order = "1"
            document.getElementById("five")
                .style.order = "4"
        }
    </script>
</body>
</html>

Supported Browsers

Property
order	Yes 29	Yes 12	Yes 20	Yes 9	Yes 12.1

html_dom.htm

Print Page