HTML | DOM Style direction Property
The Style direction property in HTML DOM is used to set or return the text direction of an element.
Syntax:
- It is used to set the text direction.
object.style.direction = "ltr|rtl|initial|inherit"
- It returns the text direction.
object.style.direction
Property Values:
- ltr: Specifies the direction as left to right which is also the default direction.
- rtl: Specifies the direction as right to left.
- initial: Sets the property to its default value.
- inherit: Inherits the property from the parent element.
Return Value: It returns the text direction of text content.
Example 1: This example set the text direction from right to left.
html
<!DOCTYPE html><html><head> <title> HTML DOM Style direction Property </title></head><body> <div> <!-- Style direction Property used here --> <p id = "para"> Welcome to GeeksforGeeks </p> </div> <input type = "button" value = "Click Here!" onclick = "myGeeks()" /> <!-- script to set text direction --> <script> function myGeeks() { document.getElementById("para").style.direction = "rtl"; } </script></body></html> |
Output:
Before Click on the button:
After Click on the button:
Example 2: This example returns the direction of text content.
html
<!DOCTYPE html><html><head> <title> HTML DOM Style direction Property </title></head><body> <div> <p id = "para" style = "direction: rtl"> Welcome to GeeksforGeeks </p> </div> <input type = "button" value = "Click Here!" onclick = "myGeeks()" /> <!-- script returns the content direction --> <script> function myGeeks() { alert(document.getElementById("para").style.direction); } </script></body></html> |
Output:
Before Click on the button:
After Click on the button:
Supported Browsers: The browser supported by Style direction property are listed below:
- Google Chrome 2 and above
- Edge 12 and above
- Internet Explorer 5.5 and above
- Firefox 1 and above
- Opera 9.2 and above
- Safari 1 and above
Please Login to comment...