Thuộc tính direction trong HTML DOM Style dùng để chỉ định hoặc lấy hướng văn bản. Giá trị mặc định: ltr (trái sang phải).
Cú pháp
object.style.direction = "ltr|rtl|initial|inherit"
Giá trị tham số
| Giá trị | Mô tả |
|---|---|
| ltr | Mặc định. Văn bản chảy từ trái sang phải |
| rtl | Văn bản chảy từ phải sang trái (tiếng Ả Rập, Hebrew...) |
| initial | Giá trị mặc định |
| inherit | Kế thừa từ phần tử cha |
Ví dụ minh họa
<!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 = "Hướng văn bản trên đã thay thành phải sang trái";
}
</script>
</head>
<body>
<div id="DIV1">
<span>ĐÂY LÀ VĂN BẢN NẰM BÊN TRONG PHẦN TỬ SPAN.</span>
</div>
<p>Thay đổi hướng văn bản bên trong span bằng cách nhấn nút dưới đây</p>
<button onclick="changeDir()">Thay đổi Hướng Văn Bản</button>
<p id="Sample"></p>
</body>
</html>
Kết quả
Ban đầu văn bản trong span hiển thịltr (trái→phải). Sau khi nhấn nút, chuyển thành rtl (phải→trái), chữ cái đảo ngược thứ tự hiển thị.
Lưu ý: direction ảnh hưởng đến thứ tự hiển thị, không thay đổi thứ tự ký tự trong DOM. Dùng cho ngôn ngữ RTL.