Open In App

HTML DOM Style direction Property

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output: 

 

 Supported Browsers: The browser supported by the Style direction property are listed below:

  • Google Chrome 2 and above
  • Edge 12 and above
  • Internet Explorer 5.5 and above
  • Firefox 1 and above
  • Opera 9.2 and above
  • Safari 1 and above


Last Updated : 14 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads