How do you find the dimensions of a “display: none” element?

Question

I have some child elements inside a div that gets the CSS display: none applied to it and I want to find out what the child element dimensions are. How can I do thi

Answer 1

You cannot find the dimensions of an element with display: none but you can turn on the display, get the dimensions and then set it back to hidden. This wouldn't cause any visual differences.

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var someHiddenDiv = document.querySelector('#some-hidden-div');
someHiddenDiv.style.display = 'block';
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';
someHiddenDiv.style.display = 'none';

#some-hidden-div {
  display: none;
}
.whats-my-dims {
  width: 75px;
  height: 42px;
  background-color: #f00;
}

  Processing... :p


  Sooo... How do I get the width and height of whats-my-dims1?


  

---

Note that in some cases setting the display: none back with inline styles might cause unnecessary trouble (because inline styles take precedence over CSS selectors unless they have !important). In such cases you might want to remove the style attribute itself totally.

In the below snippet, you would see that the addition of .show class has no effect because the inline display: none is taking precedence.

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var someHiddenDiv = document.querySelector('#some-hidden-div');
someHiddenDiv.style.display = 'block';
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';
someHiddenDiv.style.display = 'none';


var btn = document.querySelector('#show');

btn.addEventListener('click', function() {
  someHiddenDiv.classList.add('show');
});

#some-hidden-div {
  display: none;
}
.whats-my-dims {
  width: 75px;
  height: 42px;
  background-color: #f00;
}
#some-hidden-div.show {
  display: block;
}

  Processing... :p


  Sooo... How do I get the width and height of whats-my-dims1?


  
Some text



Show the hidden div

whereas in the below snippet, it doesn't cause any problem because the inline style is totally removed.

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var someHiddenDiv = document.querySelector('#some-hidden-div');
someHiddenDiv.style.display = 'block';
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';
someHiddenDiv.style = null;


var btn = document.querySelector('#show');

btn.addEventListener('click', function() {
  someHiddenDiv.classList.add('show');
});

#some-hidden-div {
  display: none;
}
.whats-my-dims {
  width: 75px;
  height: 42px;
  background-color: #f00;
}
#some-hidden-div.show {
  display: block;
}

  Processing... :p


  Sooo... How do I get the width and height of whats-my-dims1?


  
Some text



Show the hidden div