Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> JavaScript

Cách thiết lập chiều cao (height) của phần tử với JavaScript

Thuộc tính height đặt chiều cao của phần tử. Chỉ áp dụng cho block-level hoặc inline-block. Giá trị: độ dài (px, em, %), auto (mặc định, dựa trên nội dung), initial, inherit.

Ví dụ minh họa

Nhấn nút để đặt chiều cao nút bấm thành 100px:

<!DOCTYPE html>
<html>
<body>
  <h1>Tiêu đề 1</h1>
  <p>Đây là văn bản demo.</p>
  <button type="button" id="myID" onclick="display()">Cập nhật chiều cao</button>
  <script>
    function display() {
      document.getElementById("myID").style.height = "100px";
    }
  </script>
</body>
</html>

Lưu ý

  • Nội dung tràn ra ngoài nếu overflow không xử lý (mặc định visible).
  • Dùng min-height/max-height để giới hạn.
  • box-sizing: border-box làm height bao gồm padding + border.