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