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

You are here: Reference > JavaScript > client-side > style handling > properties > blockDirection (currentStyle)

blockDirection property (currentStyle)

Browser support:

Returns a string value that represents the text direction within an element.

It is no longer recommended to use. Use the dir property or the direction style property instead. See the examples below.

Syntax:

object.blockDirection;

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

This property is read-only.

Possible values:

String that represents the direction of the text.

One of the following values:

ltr

Left to right.

rtl

Right to left.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the blockDirection property:

<head>
    <script type="text/javascript">
        function GetDirection () {
            var div = document.getElementById ("myDiv");
            alert (div.blockDirection);
        }
    </script>
</head>
<body>
    <div id="myDiv" dir="rtl">The direction is right to left</div>
    <button onclick="GetDirection ();">Get element direction</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

Recommendation (dir):

<head>
    <script type="text/javascript">
        function GetDirection () {
            var div = document.getElementById ("myDiv");
            alert (div.dir);
        }
    </script>
</head>
<body>
    <div id="myDiv" dir="rtl">The direction is right to left</div>
    <button onclick="GetDirection ();">Get element direction</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to change the direction from style:

<head>
    <style>
        div.example {
            direction: rtl;
        }
    </style>
    <script type="text/javascript">
        function ChangeDirection () {
            var div = document.getElementById ("myDiv");
            var dir = div.style.direction;
            div.style.direction = (dir == "ltr")? "rtl" : "ltr";
        }
    </script>
</head>
<body>
    <div id="myDiv" class="example">1 2 3 4 5 6 7 8 9</div>
    <button onclick="ChangeDirection ();">Change element dierction</button>
</body>