Javascript Reference - HTML DOM Style direction Property
The direction property sets or gets the text direction of an element.
Browser Support
 |
 |
 |
 |
 |
|
|---|---|---|---|---|---|
direction |
Yes | Yes | Yes | Yes | Yes |
Syntax
Return the direction property:
var v = object.style.direction
Set the direction property:
object.style.direction='ltr|rtl|initial|inherit'
Property Values
| Value | Description |
|---|---|
| ltr | Text renders from left to right. This is default |
| rtl | Text renders from right to left |
| initial | Set to default value |
| inherit | Inherit from parent element. |
Technical Details
| Default Value: | ltr |
|---|---|
| Return Value: | A string representing the text direction |
| CSS Version | CSS2 |
Example
The following code shows how to set the text direction of a <p> element to "right-to-left":
<!DOCTYPE html>
<html>
<body>
<!--from ww w .ja v a 2 s .c o m-->
<p id="myP">This is an example paragraph.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
document.getElementById("myP").style.direction = "rtl";
}
</script>
</body>
</html>
The code above is rendered as follows:
Example 2
The following code shows how to get the text direction of a <p> element.
<!DOCTYPE html>
<html>
<body>
<!--from w w w .j a v a2 s.c om-->
<p id="myP" style="direction:rtl;">This is an example paragraph.</p>
<button type="button" onclick="myFunction()">test</button>
<script>
function myFunction() {
console.log(document.getElementById("myP").style.direction);
}
</script>
</body>
</html>
The code above is rendered as follows: