คุณสมบัติ offsetHeight ของ HTML DOM

คุณสมบัติ offsetHeight ของ HTML DOM ส่งคืน ตัวเลข ที่แสดงความสูงขององค์ประกอบ (element) รวมถึง padding, border และ scrollbar แต่ ไม่รวม margin

ไวยากรณ์ (Syntax)

HTMLelement.offsetHeight

ตัวอย่างการใช้งาน

ตัวอย่างนี้วัดความสูงของรูปภาพและคอนเทนเนอร์ที่มี scrollbar (ตัวอย่างเดียวกับ offsetWidth แต่วัดความสูงแทน)

<!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="Get height of picture">
      <input type="button" onclick="fitHeight()" value="Remove Scrollbars">
      <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 = 'Height of above picture with padding & border: '+imgSelect.offsetHeight;
    divDisplay.innerHTML += '<br>Height of container with 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>

ผลลัพธ์ (Output)

ก่อนกดปุ่มใดๆ:

หลังกดปุ่ม "Get height of picture":

หลังกดปุ่ม "Remove Scrollbars":