Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

HTML DOM Style cssFloat Property


คุณสมบัติ 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>

ผลลัพธ์

HTML DOM Style cssFloat Property

เมื่อคลิกปุ่ม “เปลี่ยน Floa t” ปุ่ม −

HTML DOM Style cssFloat Property