คุณสมบัติ HTML DOM dir ใช้สำหรับเปลี่ยนทิศทางข้อความขององค์ประกอบจากค่าเริ่มต้นซ้ายไปขวาไปขวาไปซ้ายหรืออัตโนมัติ คุณสมบัติ dir ใช้สำหรับการตั้งค่าและคืนค่าแอตทริบิวต์ dir ขององค์ประกอบ ค่าแอตทริบิวต์ dir ที่ส่งคืนเป็นประเภทสตริง
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ dir -
HTMLElementObject.dir = "ltr|rtl|auto"
ในที่นี้ ltr=ทิศทางข้อความจากซ้ายไปขวา และเป็นทิศทางของข้อความเริ่มต้น, rtl=ทิศทางข้อความจากขวาไปซ้าย, อัตโนมัติ=ทิศทางข้อความขึ้นอยู่กับเนื้อหาที่นี่ และมักจะคิดโดยเว็บเบราว์เซอร์
ตัวอย่าง
ให้เราดูตัวอย่างคุณสมบัติ HTML DOM dir -
<!DOCTYPE html>
<html>
<body>
<h2>HTML DOM dir property</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>Clicking on the above button will change the text direction</p>
</body>
</html> ผลลัพธ์
สิ่งนี้จะสร้างผลลัพธ์ต่อไปนี้ -
เมื่อคลิกปุ่ม "เปลี่ยน Dir" -
ขั้นแรกเราได้สร้างปุ่ม "เปลี่ยน Dir" ที่จะเรียกใช้ฟังก์ชัน changeDir() เมื่อผู้ใช้คลิก -
<button onclick="changeDir()">Change Dir</button>
ฟังก์ชัน changeDir() รับองค์ประกอบย่อหน้าโดยใช้เมธอด getElementById() และตั้งค่าคุณสมบัติ dir จากขวาไปซ้าย นี้แสดงข้อความจากขวาไปซ้าย −
function changeDir() {
document.getElementById("Sample").dir = "rtl";
} 