How to get height from html div element?

Question

I am using angular 5 where in a component I have one method

onFullScreen : function (event){ console.log(event[0]) }

Here, when I do console.log(event[0]), this will return this

This returns a HTMLDivElement, now I want to get the height property in my onFullScreen() method. How to get it?

See similar question here: https://stackoverflow.com/questions/15615552/get-div-height-with-plain-javascript — Takit Isy, Apr 09 '18 at 06:47
Can you do console..log(event[0].childNodes) and let me know what you get? — Saksham Gupta, Apr 09 '18 at 06:58

score 3 · Answer 1 · edited Dec 03 '21 at 00:14

3

The best way to get the height of an element (and lots of other layout-related properties) is to use getBoundingClientRect (https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect).

So you can do this:

const height = event[0].getBoundingClientRect().height;

edited Dec 03 '21 at 00:14

Richard

answered Apr 09 '18 at 06:52

Oscar Paz

score 1 · Answer 2 · edited Apr 09 '18 at 07:42

1

You can try this:

var height = document.getElementById('element').style.height;

Since the height is defined in inline styles for this element, this would work.

Warning: this does not work if height is not explicitly defined in css but calculated based on content or outer box.

edited Apr 09 '18 at 07:42

Joel Harkes

answered Apr 09 '18 at 06:41

sree kumar

there's nothing like rectangle here, I made rectangle in image so that it will be easy to recognize where I am getting the HTMLDivElement and height property. – Yash Jain Apr 09 '18 at 06:46
3

This wouldn't work. `style.height` only would return the `height` property set in the `style` attribute. It may return pixels, a percentage, or, probably, nothing. – Oscar Paz Apr 09 '18 at 06:54

2 Answers2