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.

.offsetWidth and .offsetHeight

To get the actual amount of space the element occupies, one of the methods is using the <kbd class="highlighted">HTMLElement.offsetWidth</kbd> and <kbd class="highlighted">HTMLElement.offsetHeight</kbd> properties:

Javascript to get width and height element, including padding and border

<!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.offsetWidth + "px<br />";
        let height = "Height: " + elem.offsetHeight + "px";
        document.getElementById("demo").innerHTML = width + height;
      }
    </script>
  </body>
</html>

Try it Yourself »

The <kbd class="highlighted">.offsetWidth</kbd> and <kbd class="highlighted">.offsetHeight</kbd> 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 <kbd class="highlighted">.getBoundingClientRect()</kbd> function returns dimensions and location of element as floating-point numbers after performing CSS transforms:

Javascript getBoundingClientRect() method returns the relative positioning

<!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();
        let x = rect.left;
        let y = rect.top;
        let width = rect.width;
        let height = rect.height;
        document.getElementById("demo").innerHTML = (" Left: " + x + " Top: " + y + " Width: " + width + " Height: " + height);
      }
    </script>
  </body>
</html>

Try it Yourself »

In most cases, <kbd class="highlighted">.offsetWidth</kbd> and <kbd class="highlighted">.offsetHeight</kbd> are the same as the width and height returned by <kbd class="highlighted">.getBoundingClientRect()</kbd> when no transforms are applied to the element. If transforms exist, the properties return the element's layout width and height, whereas <kbd class="highlighted">getBoundingClientRect()</kbd> returns the rendered width and height.

The <kbd class="highlighted">.offsetWidth</kbd> and <kbd class="highlighted">.offsetHeight</kbd> properties round values to integers. If you need fractional values, use <kbd class="highlighted">element.getBoundingClientRect()</kbd>.