คุณสมบัติ HTML DOM clear ใช้สำหรับรับหรือกำหนดตำแหน่งขององค์ประกอบลอย ใช้เพื่อระบุว่าควรย้ายองค์ประกอบด้านล่างองค์ประกอบลอยตัวอื่นหรือไม่
ต่อไปนี้เป็นไวยากรณ์สำหรับ −
การตั้งค่าคุณสมบัติที่ชัดเจน -
object.style.clear='none|left|right|both|initial|inherit'
อธิบายคุณสมบัติข้างต้นดังนี้ −
| ค่า | คำอธิบาย |
|---|---|
| ซ้าย | องค์ประกอบจะไม่ลอยอยู่ทางด้านซ้าย |
| ถูกต้อง | องค์ประกอบจะไม่ลอยอยู่ทางด้านขวา |
| ทั้งสองอย่าง | องค์ประกอบจะไม่ลอยอยู่ทางด้านซ้ายหรือด้านขวา |
| ไม่มี | องค์ประกอบจะลอยอยู่ทั้งสองด้าน และนี่คือค่าเริ่มต้น |
| สืบทอด | การสืบทอดค่าคุณสมบัติหลัก |
เรามาดูตัวอย่างคุณสมบัติที่ชัดเจนกัน −
ตัวอย่าง
<!DOCTYPE html>
<html>
<head>
<style>
img {
margin: 5px;
float: right;
clear: both;
border: 2px solid orange;
}
#DIV1{
clear:left;
}
</style>
<script>
function changeClear(){
document.getElementById("DIV1").style.clear="right";
document.getElementById("Sample").innerHTML="The div clear property is changed to right from left ";
}
</script>
</head>
<body>
<img src="https://www.tutorialspoint.com/qlikview/images/qlikview-mini-logo.jpg">
<div id="DIV1">This is sample text inside div. This is another line inside the div.Here is a div containing some random english text. This div is created to demonstrate clear property </div>
<p>Change the above div clear property by clicking the below button</p>
<button onclick="changeClear()">Change Clear</button>
<p id="Sample"></p>
</body>
</html> ผลลัพธ์
เมื่อคลิกปุ่ม “เปลี่ยนล้าง” ปุ่ม −
