คุณสมบัติ HTML DOM cssFloat ใช้สำหรับการตั้งค่าหรือรับการจัดตำแหน่งแนวนอนขององค์ประกอบ คุณสามารถลอยองค์ประกอบไปทางซ้ายหรือขวา -
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติ cssFloat -
object.style.cssFloat = "left|right|none|initial|inherit"
ค่าคุณสมบัติข้างต้นมีคำอธิบายดังนี้ −
ค่า | คำอธิบาย |
---|---|
ไม่มี | นี่คือค่าเริ่มต้นและไม่ลอยองค์ประกอบ |
ซ้าย | สิ่งนี้ทำให้องค์ประกอบลอยไปที่ตำแหน่งซ้ายสุดขององค์ประกอบหลัก |
ขวา | สิ่งนี้ทำให้องค์ประกอบลอยไปที่ตำแหน่งขวาสุดขององค์ประกอบหลัก |
ค่าเริ่มต้น | การตั้งค่าคุณสมบัตินี้เป็นค่าเริ่มต้น |
สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
ให้เราดูตัวอย่างคุณสมบัติ cssFloat -
ตัวอย่าง
<!DOCTYPE html> <html> <head> <style> #DIV1 { height: 50px; width: 50px; margin: 5px; float: left; background-color: rebeccapurple; } div+p{ height:70px; color: red; border: 2px solid #b8860b; } </style> <script> function changeFloat() { document.getElementById("DIV1").style.float = "right"; document.getElementById("Sample").innerHTML="The div element will now be floated to right"; } </script> <body> <div id="DIV1"></div> <p>This is a sample paragraph. Here is another line in this paragraph. Here is the third line in the paragraph. </p> <p>Change the above div float property by clicking the below button</p> <button onclick="changeFloat()">Change Float</button> <p id="Sample"></p> </body> </html>
ผลลัพธ์
เมื่อคลิกปุ่ม “เปลี่ยน Floa t” ปุ่ม −