How to Retrieve an HTML Element's Actual Width and Height

In this tutorial, we will suggest two methods of retrieving an HTML element’s actual width and height. Take a look at these methods and find the best one for your needs.

Watch a course JavaScript -The Complete Guide (Beginner + Advanced)

.offsetWidth and .offsetHeight

To get the actual amount of space the element occupies, one of the methods is using the HTMLElement.offsetWidth and HTMLElement.offsetHeight properties:

<!DOCTYPE html>
<html>
  <head>
  <title>Title of the document</title>
    <style>
      #divId {
        height: 200px;
        width: 350px;
        padding: 20px;
        margin: 25px;
        border: 2px solid green;
      }
    </style>
  </head>
  <body>
    <div id="divId">
      <p>To get the height and width of element, including padding and border.</p>
      <p id="demo"></p>
    </div>
    <button onclick="GetHeightWidth()">Click on button</button>
    <script>
      function GetHeightWidth() {
        let elem = document.getElementById("divId");
        let width = "Width: " + elem.offsetHeight + "px<br>";
        let height = "Height: " + elem.offsetWidth + "px";
        document.getElementById("demo").innerHTML = width + height;
      }
    </script>
  </body>
</html>

The .offsetWidth and .offsetHeight are read-only properties are read-only. The first one returns the layout element's width as an integer, and the second returns the element 's height (including vertical padding and borders) as an integer.

In case of these properties, if the element is hidden (e.g. by setting style.display on the element or one of the ancestors to the "none" value), then 0 is returned.

.getBoundingClientRect()

The .getBoundingClientRect() function returns dimensions and location of element as floating-point numbers after performing CSS transforms:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #div1 {
        height: 200px;
        width: 300px;
        overflow: auto;
      }
      #myDiv {
        width: 250px;
        height: 150px;
        border: 1px solid red;
      }
      #div2 {
        width: 1000px;
        height: 1000px;
      }
    </style>
  </head>
  <body>
    <div id="div1">
      <div id="myDiv">Use scrollbar to change the position. </div>
      <div id="div2"></div>
    </div>
    <br />
    <button onclick="GetPosition()">Get the location of the item with a red frame!</button>
    <div id="demo"></div>
    <script type="text/javascript">
      function GetPosition() {
        let div = document.getElementById("myDiv");
        let rect = div.getBoundingClientRect();
        x = rect.left;
        y = rect.top;
        width = rect.right - rect.left;
        height = rect.bottom - rect.top;
        document.getElementById("demo").innerHTML = (" Left: " + x + " Top: " + y + " Width: " + width + " Height: " + height);
      }
    </script>
  </body>
</html>

Most of the cases .offsetWidth and .offsetHeight are the same as the width and height of the .getBoundingClientRect() function, if there are not any transforms applied to the element. If transforms exist, the properties return the element's layout width and height, whereas getBoundingClientRect() returns the rendering width and height.

The .offsetWidth and .offsetHeight properties round the value to an integer. If you want a fractional value, you should use element .getBoundingClientRect().