Thuộc tính HTML DOM offsetLeft trả về một số tương ứng với vị trí bên trái của phần tử được chỉ định so với bên trái của phần tử mẹ.
Sau đây là cú pháp -
Trả về giá trị số tính bằng pixel (px)
HTMLelement.offsetLeft
Ở đây, giá trị trả về tương ứng với -
- Vị trí và lề bên trái của phần tử được chỉ định
- Phần đệm bên trái, thanh cuộn, đường viền và lề của phần tử mẹ
Hãy để chúng tôi xem ví dụ về HTML DOM offsetLeft tài sản -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetLeft</title>
<style type="text/css">
#picForm {
width:70%;
margin: 0 auto;
text-align: center;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
}
</style>
</head>
<body>
<form id="picForm">
<fieldset>
<legend>HTML-DOM-offsetLeft</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/ios/images/ios-mini-logo.jpg">
</div>
<input type="button" onclick="getLeft()" value="Get offsetLeft">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var picForm = document.getElementById("picForm");
var containerDiv = document.getElementById("containerDiv");
function getLeft() {
// window.getComputedStyle() gets the computed css
var style = window.getComputedStyle(picForm);
var style2 = window.getComputedStyle(document.body);
divDisplay.innerHTML = 'Left Offset of form: '+picForm.offsetLeft+'px';
divDisplay.innerHTML += '<br>Left position of Child(form): '+style.left;
divDisplay.innerHTML += '<br>Left margin of Child(form): '+style.marginLeft;
divDisplay.innerHTML += '<br>Left padding of Parent(body): '+style2.paddingLeft;
divDisplay.innerHTML += '<br>Left border of Parent(body): '+style2.borderLeftWidth;
divDisplay.innerHTML += '<br>Left margin of Parent(body): '+style2.marginLeft;
}
</script>
</body>
</html> Đầu ra
Trước khi nhấp vào bất kỳ nút nào -
Sau khi nhấp vào ‘ Nhận offsetLeft’ nút -
