how to get (display:none)element height using pure JavaScript?

Question

I am trying to get a height of a (display: none) element but it returns 0. But when I am using jquery it returns a valid value using this code.

/* My Code */
const elm = document.querySelector('.elm');
console.log(elm.clientHeight);
//return 0

/* IN jQuery */
console.log($(elm).height());
//return 300

.elm{
  height: 300px;
  width: 300px;
  background-color: #007bff;
  
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="elm"></div>

I need it using javascript. We all knew it very well that, Everything is possible what jQuery does in pure javaScript. Advance Thanks.

[Note] I am new in javascript!

If el if not displaying it's logical tat his height = 0. You can use `visibility: hidden;` instead of `display:none;` to get el height. — InDevX, Dec 28 '19 at 09:05
@InDevX This is very important to make it display: none; not visibility: hidden; If It's possible in jQuery then it's also possible in javascript(simpler/harder) — , Dec 28 '19 at 09:07
@Md.Tahazzot You can't do that using js. So, use jQ or you can manipulate styles using js - first add `visibility: hidden;` then remove `display:none;` then get the necessary params and roll back the changes with styles — InDevX, Dec 28 '19 at 09:16
Does this answer your question? [Need to find height of hidden div on page (set to display:none)](https://stackoverflow.com/questions/1473584/need-to-find-height-of-hidden-div-on-page-set-to-displaynone) — , Dec 28 '19 at 09:20

score 1 · Accepted Answer · answered Dec 28 '19 at 09:15

An element with display: none never has height or width. Here's a (non jquery) way to determine it's dimensions. It positions the element temporary absolute outside the viewport and then removes display: none. Now the element's dimensions can be queried. After that the positioning etc. is done in reverse and the height found is returned.

const hiddenEl = document.querySelector("#someEl");
console.log(`display none: ${hiddenEl.clientHeight}`);
console.log(`height determined by method: ${
  determineHeightOfAHiddenDivElement(hiddenEl)}`);

function determineHeightOfAHiddenDivElement(elem) {
  elem.style.position = "absolute";
  elem.style.top = "-5000px";
  elem.style.display = "initial";
  const height = elem.clientHeight;
  elem.style.display = "";
  elem.style.top = "";
  elem.style.position = "";
  return height;
}

.as-console-wrapper { top: 0; max-height: 100% !important; }

#someEl {
  display: none;
  height: 300px;
}

<div id="someEl">You don't see me</div>

@Md.Tahazzot This is a work-around. See my answer below for how jQuery does it. — TAS, Dec 28 '19 at 09:39
Not sure how JQuery does it, in the current day and age I dont use JQuery anymore. But I see @TAS answered that for you ;) — KooiInc, Dec 28 '19 at 09:41

score 0 · Answer 2 · answered Dec 28 '19 at 09:38

0

I took a look at the jQuery source. Ignoring the code to handle box-model, different browsers etc, jQuery does the following:

const elm = document.querySelector('.elm');
const styles = window.getComputedStyle(elm);
console.log(parseFloat(styles.height));

.elm{
  height: 300px;
  width: 300px;
  background-color: #007bff;
  
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="elm"></div>

answered Dec 28 '19 at 09:38

TAS

2,039
12
17

`getComputedStyle` is fine for (css)styled elements. It will not deliver the *actual height* of an element without styling – KooiInc Dec 28 '19 at 09:54

score 0 · Answer 3 · answered Dec 28 '19 at 09:41

One option is to use window.getComputedStyle(element).

const elm = document.querySelector('.elm');
const computedHeight = window.getComputedStyle(elm).height
console.log('Computed height', computedHeight);
console.log('Parsed', parseInt(computedHeight.replace('px', '')))

.elm{
  height: 300px;
  width: 300px;
  background-color: #007bff;
  
  display: none;
}

<div class="elm"></div>

Another, probably uglier, would be to clone the element, give it a display: block, attach it to the document and get the height off that, destroying the clone right after.

const elm = document.querySelector('.elm');
const clone = elm.cloneNode();
clone.style.display = 'block';
document.body.appendChild(clone);
console.log(clone.clientHeight);
document.body.removeChild(clone);

.elm{
  height: 300px;
  width: 300px;
  background-color: #007bff;
  
  display: none;
}

<div class="elm"></div>

You could also temporarily give the element itself display: block, then restore the previous style.

The ideal solution would likely depend on the use-case.

The first solution is almost identical to what TAS offered as the [jQuery-official solution](https://stackoverflow.com/a/59509705/4359868), albeit less elegant than what jQuery does. I forgot that - styles could be non-integers - `parseInt`/`parseFloat` will parse the leading number in a string, even if it ends with a non-number, so `parseInt(100px) === 100`, etc. — begedin, Dec 28 '19 at 09:43

how to get (display:none)element height using pure JavaScript?

3 Answers3

Linked