Thuộc tính style maxHeight trong HTML DOM

Thuộc tính style.maxHeight trong HTML DOM trả về và cho phép thay đổi chiều cao tối đa (maximum height) của một phần tử trong tài liệu HTML. Phần tử sẽ không bao giờ cao hơn giá trị này.

Cú pháp

Lấy giá trị maxHeight

object.style.maxHeight

Thay đổi maxHeight

object.style.maxHeight = "value"

Các giá trị

Giá trị có thể là:

Giá trị	Mô tả
none	Không giới hạn chiều cao phần tử (mặc định).
inherit	Kế thừa giá trị từ phần tử cha.
initial	Đặt về giá trị mặc định.
length	Thiết lập giá trị theo đơn vị độ dài (px, em, rem, v.v.).
percentage(%)	Thiết lập giá trị theo phần trăm chiều cao phần tử cha.

Ví dụ

Ví dụ sử dụng thuộc tính style.maxHeight:

<!DOCTYPE html>
<html>
<head>
<style>
  body { color: #000; background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%); height: 100vh; }
  p { border: 2px solid #fff; width: 200px; overflow: auto; }
  .btn { background: coral; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin-top: 4rem; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính style maxHeight DOM</h1>
<p> Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. Đây là đoạn văn 1 với một số văn bản giả. </p>
<button onclick="add()" class="btn">Thiết lập maxHeight</button>
<script>
  function add() {
    document.querySelector('p').style.maxHeight = "100px";
  }
</script>
</body>
</html>

Kết quả

Nhấn nút Thiết lập maxHeight để thiết lập chiều cao tối đa cho phần tử đoạn văn.