Thuộc tính dir trong JavaScript

• Bùi Tấn Lực
• 894
• 17/09/2025

Chức năng của Thuộc tính dir trong JavaScript

Thuộc tính dir trong JavaScript dùng để thêm thuộc tính dir vào phần tử HTML với các giá trị: rtl (right-to-left), ltr (left-to-right), auto.

Cú pháp của Thuộc tính dir trong JavaScript

tenbien.dir = "giatri";

tenbien: Tên biến là những phần tử HTML hoặc body (document.body hoặc document.getElementById("giatriid"))

giatri: Giá trị của thuộc tính dir.

Code Thuộc tính dir trong JavaScript

Thuộc tính dir trên phần tử trong JavaScript

<div id="dirid">
 <p>ltr (left-to-right): Văn bản được hiển thị từ trái sang phải. Đây là giá trị mặc định cho hầu hết các ngôn ngữ, bao gồm tiếng Việt.</p>
 <p>rtl (right-to-left): Văn bản được hiển thị từ phải sang trái. Thuộc tính này cần thiết cho các ngôn ngữ viết theo hướng này, chẳng hạn như tiếng Ả Rập và tiếng Do Thái.</p>
 <p>auto: Trình duyệt sẽ tự động xác định hướng của văn bản dựa trên các ký tự đầu tiên của phần tử.</p>
</div>
<button onclick="rtl()">Dir rtl</button>
<button onclick="ltr()">Dir ltr</button>
<button onclick="auto()">Dir auto</button>
<script>
// rtl (right-to-left)
function rtl() {
  document.getElementById("dirid").dir = "rtl";
}
// ltr (left-to-right)
function ltr() {
  document.getElementById("dirid").dir = "ltr";
}
// auto
function auto() {
  document.getElementById("dirid").dir = "auto";
}
</script>

Chạy Thử

Thuộc tính dir trên body trong JavaScript

<h1>Thuộc tính dir trên body trong JavaScript</h1>
 <p>ltr (left-to-right): Văn bản được hiển thị từ trái sang phải. Đây là giá trị mặc định cho hầu hết các ngôn ngữ, bao gồm tiếng Việt.</p>
 <p>rtl (right-to-left): Văn bản được hiển thị từ phải sang trái. Thuộc tính này cần thiết cho các ngôn ngữ viết theo hướng này, chẳng hạn như tiếng Ả Rập và tiếng Do Thái.</p>
 <p>auto: Trình duyệt sẽ tự động xác định hướng của văn bản dựa trên các ký tự đầu tiên của phần tử.</p>
<script>
document.body.dir ="rtl";
</script>

Chạy Thử

Ứng Dụng Thuộc Tính dir Trong JavaScript Thực Tế

Thuộc tính dir phát huy giá trị rõ nhất khi hướng hiển thị của văn bản cần được điều khiển theo dữ liệu hoặc ngữ cảnh sử dụng. Trong JavaScript, có thể thay đổi giá trị này trực tiếp để giao diện thích ứng với nội dung mà người dùng đang xem.

Thay Đổi Hướng Hiển Thị Nội Dung Theo Ngữ Cảnh

Khi một khu vực trên trang có thể chứa nội dung từ nhiều nguồn khác nhau, JavaScript có thể chủ động thay đổi hướng văn bản thay vì cố định một kiểu hiển thị. Cách này phù hợp với các trường nhập liệu, khu vực đọc nội dung hoặc thành phần giao diện có dữ liệu thay đổi.

Giá trị ltr thường được dùng cho nội dung hiển thị từ trái sang phải, trong khi rtl phù hợp với các ngôn ngữ có hướng đọc từ phải sang trái. Có thể thiết lập lại thuộc tính này thông qua dir của phần tử:

const content = document.querySelector("#content");

content.dir = "rtl";

Khi ngữ cảnh thay đổi, chỉ cần cập nhật lại giá trị:

content.dir = "ltr";

Cách làm này giúp JavaScript xử lý hướng văn bản theo trạng thái thực tế của giao diện mà không cần tạo nhiều phiên bản nội dung riêng biệt.

Kết Hợp dir Với Nội Dung Đa Ngôn Ngữ

Website hỗ trợ nhiều ngôn ngữ có thể cần thay đổi cả ngôn ngữ lẫn hướng hiển thị. JavaScript có thể dựa vào ngôn ngữ được người dùng lựa chọn để thiết lập hướng phù hợp cho khu vực nội dung.

Ví dụ, khi người dùng chọn một ngôn ngữ có hướng đọc từ phải sang trái, có thể cập nhật dir cho vùng nội dung tương ứng:

const content = document.querySelector("#content");
const language = "ar";

content.dir = language === "ar" ? "rtl" : "ltr";

Điểm quan trọng là không nên xem dir như một cách thay thế cho việc xác định ngôn ngữ. Hai thông tin này phục vụ các mục đích khác nhau: ngôn ngữ cho biết nội dung thuộc hệ ngôn ngữ nào, còn dir xác định hướng trình bày văn bản.

Xử Lý Hướng Văn Bản Khi Nội Dung Thay Đổi Động

Với nội dung được tải bằng JavaScript, hướng văn bản có thể được xác định sau khi dữ liệu đã được nhận. Điều này hữu ích với ứng dụng có nội dung thay đổi liên tục như hệ thống tin nhắn, trình soạn thảo hoặc giao diện nhập dữ liệu.

Có thể cập nhật nội dung và hướng hiển thị trong cùng một thao tác:

const message = document.querySelector("#message");

message.textContent = "مرحبا";
message.dir = "rtl";

Khi dữ liệu mới sử dụng hướng đọc khác, chỉ cần điều chỉnh lại thuộc tính:

message.textContent = "Xin chào";
message.dir = "ltr";

Cách xử lý này giúp hướng văn bản luôn bám sát nội dung hiện tại. Đặc biệt, nên đặt dir trên đúng phần tử cần thay đổi thay vì áp dụng tùy tiện cho toàn bộ trang, từ đó hạn chế ảnh hưởng ngoài ý muốn đến những khu vực khác.

Lời kết

Cảm ơn các bạn đã tham khảo bài viết Thuộc tính dir trong JavaScript.

Bùi Tấn Lực

Đánh giá

Chia sẻ nội dung đánh giá của bạn về Thuộc tính dir trong JavaScript
Email, Điện thoại của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Bình luận, Hỏi đáp