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