Thuộc tính bên trái kiểu DOM HTML được sử dụng để đặt hoặc trả về vị trí bên trái của phần tử được định vị. Để định vị một phần tử, bạn phải đặt thuộc tính vị trí của nó thành tương đối, tuyệt đối hoặc cố định.
Sau đây là cú pháp cho -
Đặt thuộc tính bên trái -
object.style.left = "auto|length|%|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| auto | Đây là vị trí mặc định và đặt trình duyệt ở vị trí bên trái. |
| chiều dài | Công cụ này để xác định vị trí bên trái theo đơn vị chiều dài. Nó cho phép các giá trị âm. |
| % | Xác nhận vị trí bên trái của phần tử con tính bằng% so với phần tử mẹ widthof. |
| tên 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 bên trái -
Ví dụ
<!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>Left property example</h1>
<body>
<div id="DIV1"></div>
<p>Change the left position for the below div by clicking the below button</p>
<button type="button" id="myBtn" onclick="changeLeft()">Left Position</button>
</body>
</html> Đầu ra
Khi nhấp vào “ Vị trí bên trái ”, Hộp sẽ di chuyển sang phải 50 px mỗi lần -
