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 Style direction Property
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
<!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 −
Updated on: 23-Oct-2019
12 Views
Advertisements