Thuộc tính dir của Bdo trong HTML DOM

Thuộc tính dir của Bdo trong HTML DOM liên quan đến phần tử HTML <bdo>. Bdo là viết tắt của Bi-Directional Override. Thẻ <bdo> dùng để ghi đè hướng văn bản hiện tại (mặc định trái sang phải). Thuộc tính bdo dir thiết lập hoặc trả về giá trị thuộc tính dir của phần tử <bdo>. Thuộc tính dir là bắt buộc cho phần tử <bdo>. Nó chỉ định hướng dòng văn bản.

Cú pháp

Thiết lập thuộc tính dir

bdoObject.dir = "ltr|rtl"

Ở đây, ltr là hướng văn bản trái-sang-phải, rtl là hướng văn bản phải-sang-trái.

Trả về thuộc tính dir

bdoObject.dir

Ví dụ

Dưới đây là ví dụ cho thuộc tính dir của HTML DOM bdo:

<!DOCTYPE html> <html> <body> <h3><bdo id="myBdo" dir="rtl">TỪ PHẢI SANG TRÁI</bdo></h3> <p>Click nút bên dưới để lấy hướng văn bản của văn bản trên</p> <button onclick="getDirection()">LẤY HƯỚNG</button> <button onclick="setDirection()">ĐẶT HƯỚNG</button> <p id="Sample"></p> <script>    function getDirection() {       var x = document.getElementById("myBdo").dir;       document.getElementById("Sample").innerHTML = "Hướng văn bản là từ " + x;    }    function setDirection(){       document.getElementById("myBdo").dir = "ltr";    } </script> </body> </html>

Kết quả

Ví dụ này sẽ cho kết quả sau:

Khi click LẤY HƯỚNG:

Khi click ĐẶT HƯỚNG:

Giải thích ví dụ:

Đầu tiên tạo một phần tử <bdo> bên trong <h3> với dir attribute giá trị “rtl”:

<h3><bdo id="myBdo" dir="rtl">TỪ PHẢI SANG TRÁI</bdo></h3>

Hai nút LẤY HƯỚNG và ĐẶT HƯỚNG để thực thi getDirection() và setDirection():

<button onclick="getDirection()">LẤY HƯỚNG</button> <button onclick="setDirection()">ĐẶT HƯỚNG</button>

getDirection() lấy phần tử với id “myBdo” (phần tử <bdo>). Giá trị dir property được gán cho biến x và hiển thị trong đoạn văn id “Sample”:

function getDirection() {    var x = document.getElementById("myBdo").dir;    document.getElementById("Sample").innerHTML = "Hướng văn bản là từ " + x; }

setDirection() lấy phần tử id “mybdo” và đặt dir property thành “ltr” (trái sang phải - mặc định):

function setDirection(){    document.getElementById("myBdo").dir = "ltr"; }