Thuộc tính style minHeight trong HTML DOM

Thuộc tính style.minHeight trong HTML DOM trả về và cho phép thay đổi chiều cao tối thiểu (minimum height) của một phần tử trong tài liệu HTML. Phần tử sẽ không bao giờ nhỏ hơn giá trị này, nhưng có thể mở rộng lớn hơn nếu nội dung yêu cầu.

Cú pháp

Lấy giá trị minHeight

object.style.minHeight

Thay đổi minHeight

object.style.minHeight = "value"

Các giá trị

Giá trị có thể là:

Giá trị	Mô tả
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.minHeight:

<!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: 300px; }
  .btn { background: coral; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; }
</style>
</head>
<body>
<h1>Ví dụ thuộc tính style minHeight 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 minHeight</button>
<script>
  function add() {
    document.querySelector('p').style.minHeight = "300px";
  }
</script>
</body>
</html>

Kết quả

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