CONSOLE.LOG div attributes

Question

So I have the following div.

On google chrome I can inspect the element and see the size of the div. How can I capture the size of this div and store it as a variable? I'm assuming this can dynamically change depending on the users platform.

I need the current size of the div to create a ping pong type floating ball contained in the size of that div.

This might be what you need: [https://stackoverflow.com/questions/294250/how-do-i-retrieve-an-html-elements-actual-width-and-height] — Grasshopper, Oct 18 '19 at 19:31
Possible duplicate of [ReactJS - Get Height of an element](https://stackoverflow.com/questions/35153599/reactjs-get-height-of-an-element) — Emile Bergeron, Oct 18 '19 at 20:18
Since you tagged the question with React, a mix of `getBoundingClientRect`, and React's refs should be enough. Se also: https://stackoverflow.com/q/49058890/1218980 — Emile Bergeron, Oct 18 '19 at 20:20

score 2 · Accepted Answer · answered Oct 18 '19 at 19:33

2

Sounds like you're looking for getBoundingClientRect, which gives you the bounding box values for any element in the DOM.

answered Oct 18 '19 at 19:33

Mike 'Pomax' Kamermans

49,297
16
112
153

I think the most important part is capturing componentDidMount first. – Jay Oct 19 '19 at 16:00
That is somewhat of a given though, as any DOM operations can only happen after mounting has occurred. There is no DOM to analyse before then. – Mike 'Pomax' Kamermans Oct 19 '19 at 16:30

CONSOLE.LOG div attributes

1 Answers1