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


Tags: javascript,html,css

Problem :

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

var o = document.getElementById('output');
var wmd1 = document.getElementById('whats-my-dims1');
var wmd2 = document.getElementById('whats-my-dims2');
o.innerHTML = 'wmd1: "' + wmd1.clientWidth + '", "' + wmd1.clientHeight + '", wmd2: "' + wmd2.clientWidth + '", "' + wmd2.clientHeight + '"';
#some-hidden-div{
  display: none;
}
.whats-my-dims{
  width: 69px;
  height: 42px;
  background-color: #f00;
}
<div id='output'>Processing... :p</div>
<div id='some-hidden-div'>
  <div class='whats-my-dims' id='whats-my-dims1'></div>
</div>
<div class='whats-my-dims' id='whats-my-dims2'></div>

I can only use pure JavaScript (no jQuery).

I can't change top/left/right/bottom/transform/translate/etc because this is going to be part of an animated sprite sheet custom component that can have child elements.



Solution :

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;
}
<div id='output'>
  Processing... :p
</div>
<div>
  Sooo... How do I get the width and height of whats-my-dims1?
</div>
<div id='some-hidden-div'>
  <div class='whats-my-dims' id='whats-my-dims1'></div>
</div>
<div class='whats-my-dims' id='whats-my-dims2'></div>

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


    CSS Howto..

    How do I control the height of the main content area no matter how much text is in there?

    jQuery: How to get DIV to slide-off the screen and another to slide in?

    How can I add a consistent left margin to a checkbox label?

    Why is last select option always shown, even when styled out

    CSS: How to build a vertical separator with margin on its top and bottom? [closed]

    How to toggle css visibility with Javascript

    EXTREME beginner making a website from scratch, how do i center things, pictures, and zoom problems

    How to create a similar background to this one

    css navbar how to make the text in navbar padding from top without increasing the height of the navbar

    How do I get an object from d3.data()?

    How to put a ribbon image on another image with css?

    If I have 3 elements, how do I only allow one to be highlighted when clicked at any one time? - CSS, jQuery

    How to get overlay to fill scrollable parent using pure CSS?

    How to make a div fall on hover and stay at at the bottom of the page using jquery or css?

    How can I use symbol fonts like marvosym in the browser?

    How to create a pixel perfect divider using css border [closed]

    How to enable background printing by default using css or javascript?

    How do I make this lightbox I am creating only open on the div I am clicking?

    CSS how to target 2 attributes?

    How to customize the look and feel of rich faces tab panel

    Show X inside the body tag of a php file in case the screen size is smaller than Y

    I'm am trying to have a responsive navigation bar for small screens, how can I change the left links to a css drop-down menu?

    How make text before ul to come in single line in html?

    How to import css from libraries via postCSS?

    When using CSS transformation, how to avoid an element to overflow its parent?

    How to vertical align top in my case

    How to draw grid around irregularly arranged web elements?

    How to fix clipped text over 3D transform image on Safari?

    How do I get a computed style?

    How to change the colors of HTML form elements displayed in UIWebView?