Thuộc tính Chiều cao kiểu DOM trong HTML được sử dụng để đặt hoặc trả về chiều cao của một phần tử.
Sau đây là cú pháp cho -
Đặt thuộc tính chiều cao -
object.style.height = "auto|length|%|initial|inherit"
Các thuộc tính trên được giải thích như sau -
| Giá trị | Mô tả |
|---|---|
| Tự động | Đây là giá trị mặc định và chiều cao do trình duyệt đặt. |
| Chiều dài | Xác nhận chiều cao của trình duyệt theo đơn vị chiều dài. |
| % | Đặt chiều cao phần tử con theo tỷ lệ phần trăm tương đối với phần tử gốc của nó. |
| 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ẹ |
Hãy để chúng tôi xem xét một ví dụ cho thuộc tính chiều cao -
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
#demo1 {
width:100px;
height:100px;
background-color:lightpink;
}
#demo2 {
margin-top:4px;
width:100px;
height:100px;
background-color:coral;
}
</style>
<script>
function changeHeight() {
document.getElementById("demo1").style.height="200px";
document.getElementById("Sample").innerHTML="The height for the first div has been increased by 100px";
}
</script>
</head>
<body>
<div id="demo1" >DIV1</div>
<div id="demo2" >DIV2</div>
<p>Change the font height for the text inside above divs by clicking the below button</p>
<button onclick="changeHeight()">Change Height</button>
<p id="Sample"></p>
</body>
</html> Đầu ra
Khi nhấp vào nút “ Thay đổi chiều cao Nút ”-
