HTML DOM Style direction Property

Last Updated : 14 Jun, 2023

The Style direction property in HTML DOM is used to set or return the text direction of an element.

Syntax:

It is used to set the text direction.

object.style.direction = "ltr|rtl|initial|inherit"

It returns the text direction.

object.style.direction

Property Values:

ltr: Specifies the direction as left to right which is also the default direction.
rtl: Specifies the direction as right to left.
initial: Sets the property to its default value.
inherit: Inherits the property from the parent element.

Return Value: It returns the text direction of text content.

Example 1: This example set the text direction from right to left.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style direction Property
    </title>
</head>
   
<body>
    <div>
        <!-- Style direction Property used here -->
        <p id="para">
            Welcome to GeeksforGeeks
        </p>
    </div>
    <input type="button"
           value="Click Here!"
           onclick="myGeeks()" />
    <!-- script to set text direction -->
    <script>
        function myGeeks() {
            document.getElementById("para").style.direction
                = "rtl";
        }
    </script>
</body>
</html>

Output:

Example 2: This example returns the direction of text content.

HTML

<!DOCTYPE html>
<html>
<head>
    <title>
        HTML DOM Style direction Property
    </title>
</head>
   
<body>
    <div>
        <p id="para"
           style="direction: rtl">
            Welcome to GeeksforGeeks
        </p>
    </div>
    <input type="button"
           value="Click Here!"
           onclick="myGeeks()" />
    <!-- script returns the content direction -->
    <script>
        function myGeeks() {
            alert(document.getElementById("para").style.direction);
        }
    </script>
</body>
</html>