Get Dimensions And Position Of An Element Using Pure Javascript

Situation: I want to obtain dimensions and position of an element Context: I am making a card game. Cards can be placed on the board. I need to be able to check that their destinat

Solution 1:

As I stated in my final edit, the solution for this problem came from this thread. Get the height of a Component in React The answer was influenced by the comments from SmokeyPHP where I was trying to access the properties before the elements were actually rendered. I needed to make sure to access them afterwards to get accurate information.

Solution 2:

You should use the .offsetWidth and .offsetHeight properties.

Note they belong to the element, not .style.

var width = document.getElementById('foo').offsetWidth;