Thuộc tính HTML DOM offsetWidth trả về một số tương ứng với chiều rộng của một phần tử bao gồm phần đệm, đường viền và thanh cuộn nhưng không phải lề của phần tử đó.
Sau đây là cú pháp -
Trả lại giá trị số
HTMLelement.offsetWidth
Hãy để chúng tôi xem một ví dụ về HTML DOM offsetWidth tài sản -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM offsetHeight</title>
<style>
form {
width:70%;
margin: 0 auto;
text-align: center;
}
* {
padding: 2px;
margin:5px;
}
input[type="button"] {
border-radius: 10px;
}
#containerDiv {
margin: 0 auto;
height: 100px;
width: 100px;
overflow: auto;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>HTML-DOM-offsetHeight</legend>
<div id="containerDiv">
<img id="image" src="https://www.tutorialspoint.com/hibernate/images/hibernate-mini-logo.jpg">
</div>
<input type="button" onclick="getHeight()" value="Get height of picture">
<input type="button" onclick="fitHeight()" value="Remove Scrollbars">
<div id="divDisplay">
</div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var imgSelect = document.getElementById("image");
var containerDiv = document.getElementById("containerDiv");
function getHeight() {
divDisplay.innerHTML = 'Height of above picture with padding & border: '+imgSelect.offsetHeight;
divDisplay.innerHTML += '<br>Height of container with padding & border: '+containerDiv.offsetHeight;
}
function fitHeight() {
containerDiv.style.height = imgSelect.height+'px';
containerDiv.style.width = imgSelect.width+'px';
containerDiv.style.overflow = 'hidden';
getHeight();
}
</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 ‘ Lấy chiều rộng của hình ảnh’ nút -
Sau khi nhấp vào ‘ Xóa thanh cuộn’ nút -
