Thuộc tính height trong HTML

Thuộc tính height trong HTML dùng để khai báo **chiều cao** của một phần tử (tính bằng **pixel**). Kể từ HTML5, việc chỉ định chiều cao bằng phần trăm (%) **không còn được hỗ trợ** cho thuộc tính này — hãy dùng CSS nếu cần chiều cao tương đối.

Các phần tử hỗ trợ thuộc tính height

<canvas>
<embed>
<iframe>
<img>
<input> (chỉ type="image")
<object>
<video>

Ví dụ: Thay đổi chiều cao video động

<!DOCTYPE html>
<html>
<head>
  <title>Demo Video height</title>
  <style>
    * { padding: 2px; margin: 5px; }
    form { width: 70%; margin: 0 auto; text-align: center; }
    input[type="button"] { border-radius: 10px; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>Video height demo</legend>
      <video id="myVideo" width="320" height="50" controls>
        <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        Trình duyệt không hỗ trợ video.
      </video><br>
      <button type="button" onclick="increaseHeight()">Tăng chiều cao (+50px)</button>
      <div id="msg"></div>
    </fieldset>
  </form>
  <script>
    var msg = document.getElementById("msg");
    var video = document.getElementById("myVideo");
    function increaseHeight() {
      video.height += 50;
      msg.textContent = "Chiều cao video: " + video.height + "px";
    }
  </script>
</body>
</html>

Kết quả:

Ban đầu: Video hiển thị chiều cao 50px (rất dẹp).
Mỗi lần nhấn nút: Chiều cao tăng 50px, thông báo cập nhật.

Lưu ý quan trọng

HTML attribute vs CSS property: height attribute chỉ đặt kích thước ban đầu. Dùng element.style.height hoặc CSS để responsive.
<img>: Nếu chỉ đặt width hoặc height, trình duyệt tự tính tỷ lệ khung hình (aspect ratio). Đặt cả hai có thể làm méo ảnh.
<video>: Tương tự <img>. Nên đặt một chiều, để trình duyệt tự tính chiều còn lại.
<canvas>: height attribute quyết định độ phân giải vẽ (pixel nội bộ), khác với CSS height (kích thước hiển thị). Nên đặt cả hai trùng nhau.
<iframe>: Mặc định 150px nếu không đặt.

Tham chiếu DOM

Trong JavaScript, dùng element.height (đọc/ghi attribute) hoặc element.style.height (đọc/ghi inline style).

// Attribute (pixel, số)
img.height = 200;
console.log(img.height); // 200

// Style (string, có đơn vị)
img.style.height = "200px";
console.log(img.style.height); // "200px"

Hiểu rõ height attribute giúp kiểm soát kích thước media chính xác, tránh layout shift (chuyển dịch bố cục) khi tải trang.