HTML DOM dir Property

Last Updated : 19 Aug, 2026

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 
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->

    <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>

<!--Driver Code Starts-->
</body>

</html>
<!--Driver Code Ends-->

Example 2: To get the direction of the text. 

HTML 
<!--Driver Code Starts-->
<!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>
<!--Driver Code Ends-->

    <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>

<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
  • Possible values are "ltr" (left-to-right), "rtl" (right-to-left), "auto" (direction determined from content), or "" (empty string, meaning inherit from the parent). Setting an invalid value has no effect.
  • If the element has no explicit dir attribute, element.dir returns an empty string (""), even if the element inherits directionality from a parent. The actual computed direction must be determined via other means (e.g., CSS or the :dir() pseudo-class).
Comment

Explore