Giới thiệu
Thuộc tính height trong HTML DOM Style dùng để thiết lập hoặc lấy chiều cao của một phần tử.
Cú pháp
Thiết lập height:
object.style.height = "auto|length|%|initial|inherit"
Giá trị
| Giá trị | Mô tả |
|---|---|
| auto | Mặc định: chiều cao được tính bởi trình duyệt dựa trên nội dung. |
| length | Chỉ định chiều cao bằng đơn vị độ dài (px, em, rem, vh...). |
| % | Đặt chiều cao phần tử con theo phần trăm so với chiều cao phần tử cha. |
| initial | Đặt về giá trị mặc định. |
| inherit | Kế thừa từ phần tử cha. |
Ví dụ
Ví dụ tăng chiều cao của div đầu tiên từ 100px lên 200px.
<!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 = "Chiều cao của div đầu tiên đã tăng thêm 100px";
}
</script> </head> <body>
<div id="demo1">DIV1</div>
<div id="demo2">DIV2</div>
<p>Nhấn nút để thay đổi chiều cao của div đầu tiên</p>
<button onclick="changeHeight()">Thay đổi Height</button>
<p id="Sample"></p>
</body> </html>
Kết quả
Sau khi nhấn nút Thay đổi Height:
