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 can I add padding to an element on my page?

    How to change color of text from left to right along with the background?

    How to convert columns to rows using CSS

    How do I apply a css class to certain elements using jquery?

    div not showing above text box

    how I can set color of anything in css [closed]

    CSS: How to define spacing between responsive columns

    How to make a div 100% of page (not screen) height?

    How to disable Javascript/CSS minification in ASP.NET MVC 4 Beta

    CSS: How to prevent focus from breaking absolute position in overflow:hidden wrapper

    How to create a function in which a box moves in accordance with 2 user inputs (direction and # of pixels to move)

    HTML/CSS - How do I fill background of region to left of div that shrinks on zoom out?

    How to adjust table or content in CSS when printing?

    Django + Mac osx how to use less css?

    How to align social media icons in one row?

    how to hide the content of the div in css

    How to add a background image or theme through CSS?

    How to make CSS drawn character responsive inside bootstrap column

    How to take a div that is off screen and translate it to the middle of the screen using translateX()

    How to CENTER a Vertical Menu for ALL Screen Resolutions?

    CSS - how to hide the top of a container using CSS-height, vertical-align and overflow?

    How do I use pseudo-selectors to change a “Home” button to an icon using just CSS?

    How can I push surrounding elements off screen when enlarging one?

    How to over ride the transparency aspect in CSS

    Click radio button then show submit button

    How to showing expanding text with javascript and css

    CSS border - how to populate content inside div with border

    How to check if a css rule exists

    How to set css class for Rails date_select year select?

    How to convert this CSS animation to use GPU level, instead of updating layer tree