CODEWITHSUNDEEP
javascriptjquery
user12084454
user12084454

Reputation:

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

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!

Upvotes: 1

Views: 1504

Answers (3)

begedin
begedin

Reputation: 198

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.

Upvotes: 0

TAS
TAS

Reputation: 2079

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>

Upvotes: 0

KooiInc
KooiInc

Reputation: 122898

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>

Upvotes: 2

Related Questions