Computer >> Máy Tính >  >> Lập trình >> HTML

Thuộc tính maxHeight kiểu HTML DOM Style


Thuộc tính DOM style maxHeight trả về và sửa đổi chiều cao tối đa của một phần tử trong tài liệu HTML.

Cú pháp

Sau đây là cú pháp -

  • Trả lại maxHeight

object.style.maxHeight
  • Sửa đổi maxHeight

object.style.maxHeight = “value”

Giá trị

Ở đây, giá trị có thể là -

Giá trị Giải thích
Không có Nó không đặt giới hạn về chiều cao của phần tử.
kế thừa Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó.
đầu tiên Nó đặt giá trị thuộc tính này thành giá trị mặc định.
chiều dài Nó đặt giá trị theo đơn vị chiều dài.
phần trăm (%) Nó đặt giá trị theo phần trăm chiều cao của phần tử mẹ.

Ví dụ

Hãy để chúng tôi xem một ví dụ về 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>DOM Style maxHeight Property Example</h1>
<p>
   This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text.
   This is paragraph 1 with some dummy text.
</p>
<button onclick="add()" class="btn">Set maxHeight</button>
<script>
   function add() {
      document.querySelector('p').style.maxHeight = "100px";
   }
</script>
</body>
</html>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Thuộc tính maxHeight kiểu HTML DOM Style

Nhấp vào “ Đặt maxHeight ”Để đặt chiều cao tối đa của phần tử đoạn văn.

Thuộc tính maxHeight kiểu HTML DOM Style