HTML DOM Bdo dir Property

HTMLWeb DevelopmentFront End Technology

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";
}
raja
Published on 06-Aug-2019 13:39:11
Advertisements