Как определить реальные координаты x и y, ширину и высоту у DIV, даже если они не заданы стилями

225

21 марта 2017, 13:27

Как определить реальные координаты x и y, ширину и высоту у элемента DIV, даже если они не заданы стилями?

Answer 1

Координаты, ширину и высоту можно узнавать через функцию getBoundingClientRect(). Ещё ширину и высоту можно узнавать через функции offsetWidth и offsetHeight. Эти две функции выводят округлённые размеры, в то время, как getBoundingClientRect() выводит число с дробью.

var element = document.querySelector('.element'); 
 
var width = element.offsetWidth || element.getBoundingClientRect().width, 
    height = element.offsetHeight || element.getBoundingClientRect().height, 
    position = { 
      left: element.getBoundingClientRect().left, 
      top: element.getBoundingClientRect().top, 
      right: element.getBoundingClientRect().right, 
      bottom: element.getBoundingClientRect().bottom 
    }; 
 
console.log( 
  'Width: '+width+';\nHeight: '+height+';\nPosition Top: '+position.top+';\nPosition: Left: '+position.left+';\nPosition Right: '+position.right+';\nPosition Bottom: '+position.bottom 
);