Thuộc tính rõ ràng HTML DOM được sử dụng để lấy hoặc thiết lập vị trí của một phần tử nổi. Nó được sử dụng để chỉ định liệu một phần tử có nên được di chuyển xuống bên dưới một phần tử nổi khác hay không.
Sau đây là cú pháp cho -
Đặt thuộc tính rõ ràng -
object.style.clear='none|left|right|both|initial|inherit'
Các thuộc tính trên được giải thích như sau -
Giá trị | Mô tả |
---|---|
còn lại | Các phần tử không được thả nổi ở phía bên trái. |
đúng | Các phần tử không được thả nổi ở phía bên phải |
cả | Các phần tử không được thả nổi ở cả bên trái và bên phải. |
không có | Các phần tử được thả nổi ở cả hai bên và đây là giá trị mặc định. |
kế thừa | Để kế thừa giá trị thuộc tính mẹ |
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính rõ ràng -
Ví dụ
<!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>
Đầu ra
Khi nhấp vào nút “Xóa thay đổi” nút -