Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM dir property
The HTML DOM dir property is used for changing an element’s text direction from default left to right to right to left or auto. The dir property is used for setting and returning the dir attribute value of an element. The returned dir attribute value is of type string.
Syntax
Following is the syntax for −
Setting the dir property −
HTMLElementObject.dir = "ltr|rtl|auto"
Here, ltr=left to right text direction and it is the default text direction., rtl=right to left text direction, auto=text direction is based on content here and is usually figured by the web browser.
Example
Let us look at an example for the HTML DOM dir property −
<!DOCTYPE html>
<html>
<body>
<h2>HTML DOM dir property</h2>
<p id="Sample">This is a sample text</p>
<button onclick="changeDir()">Change Dir</button>
<script>
function changeDir() {
document.getElementById("Sample").dir = "rtl";
}
</script>
<p>Clicking on the above button will change the text direction</p>
</body>
</html>Output
This will produce the following output −
On clicking the “Change Dir” button −
We have first created a button “Change Dir” that will execute the changeDir() function when clicked by the user −
<button onclick="changeDir()">Change Dir</button>
The changeDir() function gets the paragraph element using the getElementById() method and sets its dir property value right to left. This displays the text from right to left −
function changeDir() {
document.getElementById("Sample").dir = "rtl";
}
93 Views
