In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > style handling > properties > browser specific extensions > MozBoxDirection

MozBoxDirection style property | webkitBoxDirection style property

Browser support:

MozBoxDirection

webkitBoxDirection

Specifies or retrieves the direction in which the children of a box are placed.

Only works for box objects. An element is a box object if the display property of the element has the value of -moz-box (-webkit-box) or -moz-inline-box (-webkit-inline-box).

Syntax:

object.MozBoxDirection;
object.webkitBoxDirection;

You can find the related objects in the Supported by objects section below.

MozBoxDirection:	This property is read/write.
webkitBoxDirection:	This property is read/write.

CSS page for this property: -moz-box-direction

Possible values:

The type of this property is string.

One of the following values:

inherit

Takes the value of this property from the computed style of the parent element.

normal

Children are placed either from left to right or top to bottom in the order the elements appear in the XUL source or document tree.

reverse

Children are placed either from right to left or bottom to top in the order the elements appear in the XUL source or document tree.

Default: normal.

Example HTML code 1:

This example illustrates the use of the -moz-box-direction and the -webkit-box-direction properties:

<head>
    <style>
        .normal {
            width: 250px;
            border: 2px solid red;

            display: -moz-inline-box;
            display: -webkit-inline-box;
            -moz-box-direction: normal;
            -webkit-box-direction: normal;
        }
        .reverse {
            width: 250px;
            border: 2px solid red;
            
            display: -moz-inline-box;
            display: -webkit-inline-box;
            -moz-box-direction: reverse;
            -webkit-box-direction: reverse;
        }
    </style>
</head>
<body>
    <div class="normal">
        <i>direction normal</i>
    </div>
    <br /><br />
    <div class="reverse">
        <i>direction reverse</i>
    </div>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the MozBoxDirection and webkitBoxDirection properties in JavaScript:

<head>
    <style>
        .example {
            display: -moz-inline-box;
            display: -webkit-inline-box;
            width: 250px;
            border: 5px solid red;
            -moz-box-direction: reverse;
            -webkit-box-direction: reverse;
        }
    </style>

    <script type="text/javascript">
        function ChangeBoxDirection (selectTag) {
            // Returns the index of the selected option
            var whichSelected = selectTag.selectedIndex;

            // Returns the selected option's text
            var boxDir = selectTag.options[whichSelected].text;

            var div = document.getElementById ("myDiv");

            if ('MozBoxDirection' in div.style) {
                div.style.MozBoxDirection = boxDir;
            } else if ('webkitBoxDirection' in div.style) {
                div.style.webkitBoxDirection = boxDir;
            } else {
                alert ("Your browser doesn't support this example!");
            }
        }
    </script>
</head>
<body>
    <div class="example" id="myDiv">
        <b>first elem</b>
        <i>second elem</i>
    </div>
    
    <select onchange="ChangeBoxDirection (this);" size="3">
        <option />inherit
        <option />normal
        <option selected="selected" />reverse
    </select>
</body>