Open In App
Related Articles

HTML DOM dir Property

Improve Article
Improve
Save Article
Save
Like Article
Like

The DOM dir Property is used to set or return the value of a dir attribute in an Element. It defines the direction of the text in an Element Content.

Syntax 

HTMLElementObject.dir

Return Values: It returns the direction of the text. 

HTMLElementObject.dir = "ltr|rtl|auto"

Properties: 

  • ltr: It is a default value and is used to return the text-direction towards left-to-right.
  • rtl: It is used to return the right-to-left text-direction.

Example 1: To change the direction of the text. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML DOM dir Property
    </title>
    <style>
        button {
            margin-left: 270px;
        }
    </style>
</head>
   
<body>
    <h1 style="color:green;font-weight:bold;
               text-align:center;">
        GeeksForGeeks
    </h1>
    <h2 style="color:green;
               font-weight:bold;
               text-align:center">
        DOM dir Property
    </h2>
    <p id="sudo" dir="ltr">
        <b>
            GeeksForGeeks is a good website for
            learning computer science.
        </b>
    </p>
    <button onclick="geeks()">Submit</button>
    <p id="GFG"></p>
   
    <script>
        function geeks() {
            let g = document.getElementById("sudo").dir;
            document.getElementById("GFG").innerHTML =
            "The text-direction was changed from ltr to " + g;
        }
    </script>
</body>
 
</html>

Output:

 

Example 2: To get the direction of the text. 

HTML




<!DOCTYPE html>
<html>
   
<head>
    <title>
        HTML DOM dir Property
    </title>
    <style>
        button {
            margin-left: 270px;
        }
    </style>
</head>
   
<body>
    <h1 style="color:green;font-weight:bold;
               text-align:center;">
        GeeksForGeeks
    </h1>
    <h2 style="color:green;font-weight:bold;
               text-align:center">
        DOM dir Property
    </h2>
    <p id="sudo" dir="ltr">
        <b>
            GeeksForGeeks is a good website for
            learning computer science.
        </b>
    </p>
    <button onclick="geeks()">Submit</button>
    <p id="GFG"></p>
   
    <script>
        function geeks() {
            let g = document.getElementById("sudo").dir;
            document.getElementById("GFG").innerHTML =
              " Direction of the text is " + g;
        }
    </script>
 
</body>
 
</html>

Output:

 

Supported Browsers: The browser supported by DOM Dir property are listed below: 

  • Google Chrome 1
  • Edge 12
  • Internet Explorer 5.5
  • Firefox 1
  • Opera 12.1
  • Safari 3

Last Updated : 16 Jun, 2023
Like Article
Save Article
Similar Reads
Related Tutorials