how can i get element height in javascript

Question

I have tried this and it just brings an empty space in console of my browser. How can can i get the height of my element.

var background = document.getElementById('bgimage');
console.log(background.style.height);

.background {
  width: 100%;
  height: 500vh;
}

<div class="section s1">
  <div class="background" id="bgimage">
    .......
  </div>
</div>

Does this answer your question? [How do you get the rendered height of an element?](https://stackoverflow.com/questions/526347/how-do-you-get-the-rendered-height-of-an-element) — BadPiggie, Nov 30 '19 at 10:04

score 2 · Answer 1 · answered Nov 30 '19 at 10:10

2

An element's clientHeight is a measurement that includes the element CSS height and the element vertical padding and, if rendered, subtracting the height of the horizontal scrollbar.

try background.clientHeight

answered Nov 30 '19 at 10:10

Vickey Sharma

90
7

Ritesh Khandekar · Accepted Answer · 2019-11-30T11:29:18.303

2

Use offsetHeight:

var background = document.getElementById('bgimage');
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
console.log(background.offsetHeight*100/h);

.background {
width: 100%;
height: 500vh;
}

<div class="section s1">
<div class="background" id="bgimage">
   .......
</div>
</div>

Note: element.offsetHeight will return height of element in pixels (px).

edited Nov 30 '19 at 11:29

answered Nov 30 '19 at 10:25

Ritesh Khandekar

3,885
3
15
30

how can i get it back by (vh) – Nov 30 '19 at 11:16
See updated answer. [Also read this](https://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript) – Ritesh Khandekar Nov 30 '19 at 11:30

score 0 · Answer 3 · answered Nov 30 '19 at 10:13

0

Just fix your javascript code

var background = document.getElementById('bgimage');
var bgimage = getComputedStyle(background);
console.log(bgimage.getPropertyValue('height'));

answered Nov 30 '19 at 10:13

can i get this value by (vh); – Nov 30 '19 at 11:35
This one might help you. https://stackoverflow.com/questions/28295072/how-can-i-convert-px-to-vw-in-javascript – Nov 30 '19 at 13:36

how can i get element height in javascript

3 Answers3