Skip to content
Related Articles

Related Articles

HTML | DOM Style direction Property

Improve Article
Save Article
  • Last Updated : 14 Jul, 2022
Improve Article
Save Article

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: 

Before Click on the button:

  

After Click on the button:

  

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: 

Before Click on the button:

  

After Click on the button:

  

Supported Browsers: The browser supported by 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

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!