Thuộc tính offsetHeight trong HTML DOM

Thuộc tính offsetHeight trong HTML DOM trả về một số tương ứng với chiều cao của một phần tử, bao gồm padding, border và thanh cuộn nhưng không bao gồm margin.

Cú pháp

HTMLelement.offsetHeight

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính offsetHeight:

<!DOCTYPE html>
<html>
<head>
  <title>HTML DOM offsetHeight</title>
  <style>
    form { width: 70%; margin: 0 auto; text-align: center; }
    * { padding: 2px; margin: 5px; }
    input[type="button"] { border-radius: 10px; }
    #containerDiv { margin: 0 auto; height: 100px; width: 100px; overflow: auto; }
  </style>
</head>
<body>
  <form>
    <fieldset>
      <legend>HTML-DOM-offsetHeight</legend>
      <div id="containerDiv">
        <img id="image" src="https://www.tutorialspoint.com/db2/images/db2-mini-logo.jpg">
      </div>
      <input type="button" onclick="getHeight()" value="Lấy chiều cao ảnh">
      <input type="button" onclick="fitHeight()" value="Xóa thanh cuộn">
      <div id="divDisplay"></div>
    </fieldset>
  </form>
  <script>
    var divDisplay = document.getElementById("divDisplay");
    var imgSelect = document.getElementById("image");
    var containerDiv = document.getElementById("containerDiv");
    function getHeight() {
      divDisplay.innerHTML = 'Chiều cao ảnh với padding & border: ' + imgSelect.offsetHeight;
      divDisplay.innerHTML += '<br>Chiều cao container với padding & border: ' + containerDiv.offsetHeight;
    }
    function fitHeight() {
      containerDiv.style.height = imgSelect.height + 'px';
      containerDiv.style.width = imgSelect.width + 'px';
      containerDiv.style.overflow = 'hidden';
      getHeight();
    }
  </script>
</body>
</html>

Kết quả

Trước khi nhấn bất kỳ nút nào:

Sau khi nhấn nút 'Lấy chiều cao ảnh':

Sau khi nhấn nút 'Xóa thanh cuộn':