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 Bdo dir Property
The HTML DOM Bdo dir property is associated with the HTML <bdo>element. Here, bdo stands for Bi-Directional Override. The <bdo> tag is used to override the current text direction which is by default left to right. The bdo dir property sets or returns the dir attribute value of a <bdo> element. The dir property is compulsory for the <bdo> element. It specifies the direction of the text flow.
Syntax
Following is the syntax for −
Setting the dir property −
bdoObject.dir = "ltr|rtl"
Here, ltr is left-to-right text direction, whereas rtl is right-to-left text direction.
Returning the dir property −
bdoObject.dir
Example
Let us see an example for HTML DOM bdo dir property −
<!DOCTYPE html>
<html>
<body>
<h3><bdo id="myBdo" dir="rtl">RIGHT-TO-LEFT</bdo></h3>
<p>Click the below button to get text direction of the above text</p>
<button onclick="getDirection()">GET DIRECTION</button>
<button onclick="setDirection()">SET DIRECTION</button>
<p id="Sample"></p>
<script>
function getDirection() {
var x = document.getElementById("myBdo").dir;
document.getElementById("Sample").innerHTML ="The text direction is from " + x;
}
function setDirection(){
document.getElementById("myBdo").dir="ltr";
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking GET DIRECTION −
On clicking SET DIRECTION −
In the above example −
We have first created a element inside the <h3>element with the dir attribute value set to “rtl” −
<h3><bdo id="myBdo" dir="rtl">RIGHT-TO-LEFT</bdo></h3>
We have then created two buttons GET DIRECTION and SET DIRECTION to execute getDirection() and setDirection() functions respectively −
<button onclick="getDirection()">GET DIRECTION</button> <button onclick="setDirection()">SET DIRECTION</button>
The getDirection() function gets the element with id “myBdo” associated with it which is the <bdo> element in our case.The dir property value obtained from the element is then assigned to the variable x. The value is then displayed in the paragraph that has id “Sample” associated with it −
function getDirection() {
var x = document.getElementById("myBdo").dir;
document.getElementById("Sample").innerHTML ="The text direction is from " + x;
}The setDirection() function gets the element by id “mybdo” and sets its dir property value to “ltr” which means left to right. It is also the default text direction −
function setDirection(){
document.getElementById("myBdo").dir="ltr";
}
73 Views
