Skip to content
Related Articles

Related Articles

HTML | DOM Style direction Property
  • Last Updated : 31 Jul, 2019

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 examplel set the text direction from right to left.






<!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:
Before Click on the button:

After Click on the button:

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




<!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:
Before Click on the button:

After Click on the button:

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

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Opera
  • Safari
My Personal Notes arrow_drop_up
Recommended Articles
Page :