คุณสมบัติ HTML DOM Style right ส่งกลับและแก้ไขตำแหน่งที่ถูกต้องขององค์ประกอบ HTML ที่วางตำแหน่งในเอกสาร HTML
ไวยากรณ์
ต่อไปนี้เป็นไวยากรณ์ -
1. กลับขวา
object.right
2. แก้ไขสิทธิ์
object.right = “value”
ในที่นี้ ค่าสามารถเป็น −
Sr.No | ค่า &คำอธิบาย |
---|---|
1 | ค่าเริ่มต้น โดยตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
2 | สืบทอด มันรับค่าคุณสมบัตินี้จากองค์ประกอบหลัก |
3 | percentage(%) มันกำหนดค่าเป็นเปอร์เซ็นต์ของความกว้างขององค์ประกอบหลัก |
4 | ความยาว มันกำหนดค่าที่ถูกต้องในหน่วยความยาว |
5 | อัตโนมัติ ช่วยให้เบราว์เซอร์ตั้งค่าตำแหน่งที่ถูกต้องได้ |
ให้เรามาดูตัวอย่าง HTML DOM Style right Property -
ตัวอย่าง
<!DOCTYPE html> <html> <style> body { color: #000; height: 100vh; } .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem 0; } .square { width: 100px; height: 100px; background: #db133a6b; position: relative; } .show { font-size: 1.2rem; margin: 1rem 0; } </style> <body> <h1>DOM Style right Property Demo</h1> <div class='square'></div> <button onclick="set()" class="btn">Set right position</button> <script> function set() { document.querySelector('.square').style.right = "-400px"; } </script> </body> </html>
ผลลัพธ์
คลิกที่ “กำหนดตำแหน่งที่ถูกต้อง ” เพื่อกำหนดตำแหน่งขวาของสี่เหลี่ยมสีชมพู