HTML DOM dir Property

Last Updated : 16 Jun, 2023

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>