Thuộc tính offsetWidth trong HTML DOM

Thuộc tính offsetWidth trong HTML DOM trả về một số tương ứng với chiều rộng 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.offsetWidth

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính offsetWidth (ví dụ sử dụng offsetHeight nhưng nguyên lý tương tự):

<!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/hibernate/images/hibernate-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 rộng ảnh':

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