getBoundingClientRect

getBoundingClientRect — удобный метод HTML-элементов для определения расположения элемента относительно окна и нахождения размеров элемента (ширины и высоты). Метод возвращает объект с свойствами left, top, bottom, right, width, height. Получите ссылку на HTML-элемент и вызовите метод — вы узнаете указанные свойства. Пример определения размеров элемента.

getBoundingClientRect: использование

HTML-код элемента для определения размера и положения:

<div class="some">
</div>

CSS-код задающий раскраску, положение и размеры блоку:

.some{
  width: 200px;
  height: 110px;
  background: rgba(120,140,180,.5);
  margin-left: 120px;
  margin-top: 50px;
}

JavaScript :

var some = document.querySelectorAll(".some")[0];
var rect = some.getBoundingClientRect();
some.innerHTML = "ширина = " + rect.width + "<br>";
some.innerHTML += "высота = " + rect.height + "<br>";
some.innerHTML += "сверху = " + rect.top + "<br>";
some.innerHTML += "слева = "  + rect.left + "<br>";

Метод очень помогает при анимировании HTML-элементов на странице или особом контроле их расположения.