Thuộc tính HTML DOM cssFloat được sử dụng để thiết lập hoặc lấy căn chỉnh theo chiều ngang của một phần tử. Bạn có thể thả nổi phần tử sang trái hoặc phải -
Sau đây là cú pháp cho -
Đặt thuộc tính cssFloat -
object.style.cssFloat = "left|right|none|initial|inherit"
Các giá trị thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| Không có | Đây là giá trị mặc định và không thả nổi phần tử. |
| Trái | Điều này làm cho phần tử trôi về vị trí ngoài cùng bên trái của dấu ngoặc kép. |
| Đúng | Điều này làm cho phần tử trôi về vị trí ngoài cùng bên phải của dấu ngoặc kép. |
| Ban đầu | Đang xác nhận thuộc tính này về giá trị ban đầu. |
| Kế thừa | Kế thừa giá trị thuộc tính mẹ |
Chúng ta hãy xem một ví dụ cho thuộc tính cssFloat -
Ví dụ
<!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> Đầu ra
Khi nhấp vào nút “ Thay đổi Floa nút t ”-
