คุณสมบัติ dir ใน HTML DOM

คุณสมบัติ dir ใน HTML DOM ใช้สำหรับเปลี่ยนทิศทางข้อความขององค์ประกอบจากค่าเริ่มต้นซ้ายไปขวา (ltr) เป็นขวาไปซ้าย (rtl) หรืออัตโนมัติ (auto) ใช้สำหรับตั้งค่าหรือคืนค่าคุณสมบัติ dir ขององค์ประกอบ คืนค่าเป็นสตริง

ไวยากรณ์ (Syntax)

การตั้งค่าคุณสมบัติ dir:

HTMLElementObject.dir = "ltr|rtl|auto"

• ltr = ทิศทางข้อความซ้ายไปขวา (ค่าเริ่มต้น)
• rtl = ทิศทางข้อความขวาไปซ้าย
• auto = ทิศทางข้อความขึ้นกับเนื้อหา โดยเบราว์เซอร์จะตัดสินใจเอง

ตัวอย่าง

ตัวอย่างการเปลี่ยนทิศทางข้อความเป็นขวาไปซ้าย:

<!DOCTYPE html>
<html>
<body>
<h2>คุณสมบัติ dir ใน HTML DOM</h2>
<p id="Sample">This is a sample text</p>
<button onclick="changeDir()">Change Dir</button>
<script>
  function changeDir() {
    document.getElementById("Sample").dir = "rtl";
  }
</script>
<p>คลิกปุ่มด้านบนจะเปลี่ยนทิศทางข้อความ</p>
</body>
</html>

ผลลัพธ์

เมื่อโหลดหน้าเว็บ ข้อความ "This is a sample text" แสดงปกติ (ซ้ายไปขวา)

เมื่อคลิกปุ่ม "Change Dir" ข้อความจะแสดงจากขวาไปซ้าย

คำอธิบายโค้ด

• สร้างย่อหน้า id="Sample" มีข้อความภาษาอังกฤษ
• สร้างปุ่ม "Change Dir" เรียกใช้ changeDir() เมื่อคลิก
• ฟังก์ชัน changeDir() ดึงองค์ประก้า id="Sample" แล้วตั้งค่า .dir = "rtl" ทำให้ข้อความแสดงจากขวาไปซ้าย