Giới thiệu
Thuộc tính left trong HTML DOM Style dùng để thiết lập hoặc lấy vị trí bên trái của một phần tử đã được định vị (positioned element). Để định vị phần tử, phải thiết lập position là relative, absolute hoặc fixed.
Cú pháp
Thiết lập left:
object.style.left = "auto|length|%|initial|inherit"
Giá trị
| Giá trị | Mô tả |
|---|---|
| auto | Mặc định: trình duyệt tính vị trí trái. |
| length | Chỉ định vị trí trái bằng đơn vị độ dài. Cho phép giá trị âm. |
| % | Vị trí trái của phần tử con theo % chiều rộng phần tử cha. |
| initial | Đặt về mặc định. |
| inherit | Kế thừa từ cha. |
Ví dụ
Ví dụ di chuyển div sang phải 50px mỗi lần nhấn nút.
<!DOCTYPE html> <html> <head> <style>
#DIV1{
margin-top:70px;
position:absolute;
width:100px;
height:100px;
background-color:red;
}
</style> <script>
var setLeft = 50;
function changeLeft() {
document.getElementById("DIV1").style.left = setLeft + "px";
setLeft += 50;
}
</script> </head> <h1>Ví dụ left property</h1> <body>
<div id="DIV1"></div>
<p>Nhấn nút để thay đổi vị trí left của div</p>
<button type="button" id="myBtn" onclick="changeLeft()">Left Position</button>
</body> </html>
Kết quả
Sau khi nhấn nút Left Position, hộp sẽ di chuyển phải 50px mỗi lần:
