How to access HTMLElement properties of DOMElement.node?

Phaser 3
1

So I have an HTML file in my game assets which I preload and create using
const htmlEl = this.scene.add.dom(0, 0).createFromCache(“HTML asset name from loader”);
Then I add it to the container and show: all the content is visible and as expected.

After creating and before showing I manipulate some of htmlEl children DIVs setting text content and changing the display property. After the manipulation, the resulting content has a different size and I need to recenter it.

  1. htmlEl.width and htmlEl.height properties contain some old “pre-manipulation” values, but if I call htmlEl.updateSize() these properties become “0”. I am making sure to set htmlEl to be visible and its alpha > 0 before calling updateSize(). So why width and height are zeroes??
  2. Ok then, I put console.log(htmlEl.node) and get all the properties of the HTMLElement object, and its properties “offsetWidth” and “offsetHeight” have the correct values that I want to use so
  3. I am accessing htmlEl.node.offsetWidth and htmlEl.node.offsetHeight and get zeroes again (not “undefined” but “0”!). Why zeroes again??
  4. Ok, console.log(Object.keys(htmlEl.node)) and I get “[‘phaser’]” only - but where did all the HTMLElement properties go??
  5. checking prototype: console.log(Object.getOwnPropertyNames(Object.getPrototypeOf(htmlEl.node))) - "[‘align’, ‘constructor’] …

I even looked at the source and found that “htmlEl.node.phaser” is a pointer to htmlEl itself, but why?

But how can I get these “offsetWidth” and “offsetHeight” props of htmlEl.node that I see in the console??

Please, help!

2

Console output 1
Console output 1850×235 21.1 KB

In this screenshot, you can see the output

  1. (GameEndPage:45): console.log(htmlEl.width, htmlEl.height)
  2. (GameEndPage:52): same as 1) but after calling htmlEl.updateSize()
  3. (GameEndPage:63): console.log(Object.keys(htmlEl))
  4. (GameEndPage:64): console.log(Object.keys(htmlEl.node))

Console output 2
Console output 2822×822 34.1 KB

This screenshot is the output of
(GameEndPage:69): console.dir(htmlEl.node)
You can see on top the “phaser” prop that contains htmlEl DOMElement AND all the HTMLElement props of htmlEl.node including needed “offsetWidth” and “offsetHeight”.

How can I access these HTMLElement properties in JS that the browser console shows?

3

Ok, after some fiddling I found out that DOMElement.width and DOMElement.height are indeed updated but after a small delay.
After making the DOMElement barely visible (visible = true, alpha = 0.01) I call updateSize() with no delay or setTimeout() with 1 ms: width and height are still “0”. But the delay of just 2 ms(!) is enough (on my laptop) for these props to be updated with values from HTMLElement.offsetWidth" (and “.scrollWidth”).

(Sigh…) that wasn’t easy to catch this moment.
And you’d probably want to set this delay a bit longer(10 ms?) to be sure you get the data on any device.