How Do You Find The Dimensions Of A "display: None" Element?

August 30, 2023 Post a Comment

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 this? Fiddle Demo

Solution 1:

Use window.getComputedStyle()

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + window.getComputedStyle(wmd1).getPropertyValue("width") 
+ '", "' 
+ window.getComputedStyle(wmd1).getPropertyValue("height") 
+ '", wmd2: "' 
+ window.getComputedStyle(wmd2).getPropertyValue("width") + '", "' 
+ window.getComputedStyle(wmd2).getPropertyValue("height") + '"';

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

<divid='output'>
  Processing... :p
</div><div>
  Sooo... How do I get the width and height of whats-my-dims1?
</div><divid='some-hidden-div'><divclass='whats-my-dims'id='whats-my-dims1'></div></div><divclass='whats-my-dims'id='whats-my-dims2'></div>

jsfiddle https://jsfiddle.net/h9b17vyk/3/

Solution 2:

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;
}

<divid='output'>
  Processing... :p
</div><div>
  Sooo... How do I get the width and height of whats-my-dims1?
</div><divid='some-hidden-div'><divclass='whats-my-dims'id='whats-my-dims1'></div></div><divclass='whats-my-dims'id='whats-my-dims2'></div>

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;
}

<divid='output'>
  Processing... :p
</div><div>
  Sooo... How do I get the width and height of whats-my-dims1?
</div><divid='some-hidden-div'><divclass='whats-my-dims'id='whats-my-dims1'>Some text</div></div><divclass='whats-my-dims'id='whats-my-dims2'></div><buttonid='show'>Show the hidden div</button>

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;
}

<divid='output'>
  Processing... :p
</div><div>
  Sooo... How do I get the width and height of whats-my-dims1?
</div><divid='some-hidden-div'><divclass='whats-my-dims'id='whats-my-dims1'>Some text</div></div><divclass='whats-my-dims'id='whats-my-dims2'></div><buttonid='show'>Show the hidden div</button>

Solution 3:

You can't get dimensions of an element with display: none, because since it's hidden, it doesn't take any space, so it has no dimensions. The same apply to its children.

You can instead make the element visible for a while, check the child dimensions and make the element invisible back. As pointed by @JanDvorak:

Browsers don't repaint while synchronous Javascript is running, so the element should never appear on-screen.

Example code:

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

See demo on JS Fiddle.

Solution 4:

For someone who need this to implement a context menu or hint window:

The getComputedStyle() isn't seem to work on elements that have dynamic width/height. All you get is auto.

My approach was to set visibility: hidden and setting display other than none (what would required to show your element).

I used this 3 step method in a context menu component for calculating where to place the menu relative to the click position to always be on-screen:

set visibility: hidden and remove display: none (set to what it will be when the menu finally shown)
get the dimensions
remove visibility: hidden

It will probably still not work when the parent also has display: none but that wasn't an issue for this use case as one can not (should not) access a context menu of an object that is not shown anyway.

Solution 5:

You can add this :

var wmd1Style = window.getComputedStyle(wmd1);
o.innerHTML = 'wmd1: "' + parseInt(wmd1Style['width'], 10) + '", "' + parseInt(wmd1Style['height'], 10) + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';

Html5 Tips