HTML DOM Style direction Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Style direction property is used to specify or returning the text direction. Its default value is ltr.

Following is the syntax for −

Setting the direction property −

object.style.direction = "ltr|rtl|initial|inherit"

The above property values are explained as follows −

Value
Description
ltr
Thisis the default value and text flows from left to right.
rtl
Thetext flows from right to left.
initial
Forsetting this property to initial value.
inherit
Toinherit the parent property value

Let us look at an example for the direction property −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
   div,span {
      margin: 3px;
      padding: 4px;
   }
   div{
      height: 50px;
      width: 540px;
      border: 2px solid black;
   }
   span {
      float: left;
      width: 500px;
      height:40px;
      background-color: lightblue;
   }
</style>
<script>
   function changeDir(){
      document.getElementById("DIV1").style.direction="rtl";
      document.getElementById("Sample").innerHTML="The above text direction is now right to left";
   }
</script>
</head>
<body>
   <div id="DIV1">
      <span>THIS IS SOME TEXT INSIDE A SPAN ELEMENT.</span>
   </div>
   <p>Change the above text direction present inside the span element by clicking the below button</p>
   <button onclick="changeDir()">Change Text Direction</button>
   <p id="Sample"></p>
</body>
</html>

Output

On clicking the “Change Text Direction” button −

raja
Published on 23-Oct-2019 12:17:26
Advertisements