HTML DOM dir Property
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;"> w3wiki </ h1 > < h2 style="color:green; font-weight:bold; text-align:center"> DOM dir Property </ h2 > < p id = "sudo" dir = "ltr" > < b > w3wiki is a good website for learning computer science. </ b > </ p > < button onclick = "Beginner()" >Submit</ button > < p id = "GFG" ></ p > < script > function Beginner() { 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;"> w3wiki </ h1 > < h2 style="color:green;font-weight:bold; text-align:center"> DOM dir Property </ h2 > < p id = "sudo" dir = "ltr" > < b > w3wiki is a good website for learning computer science. </ b > </ p > < button onclick = "Beginner()" >Submit</ button > < p id = "GFG" ></ p > < script > function Beginner() { 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