How to get the min-height of the object when its parent is set to display none?

Why I can't get the min-height of an object when its <strong>parent</strong> is set to display: none, but I still can it the object's height if the min-height is <strong>not</strong> in use?

For instance,


li { display:none; } .object { display:block; width:100px; border:1px solid #000; }


<li><a href="#" class="object" style="height:200px;"><img class="element" /></a></li> <li><a href="#" class="object" style="min-height:300px;"><img class="element" /></a></li>


$(document).ready(function(){ $('.object img').each(function(){ alert($(this).parent().height()); }); });


How can I still get the min-height of the object even though its parent is set to display none?


When an element isn't displayed, it has no height or width.

You can extract the CSS attribute, though:



Note that this now returns a string with "px" at the end, instead of a number like height() does. You may need to parse it as an integer:

alert( parseInt($(this).parent().css('min-height'),10) );

Obviously if there's no min-height set in CSS, this won't work. Depending on what you want the number for, you may need to add some programmatic logic that extracts .css('height') if there's no min-height returned.

$(document).ready(function(){ $('.object img').each(function(){ var h = parseInt($(this).parent().css('min-height'),10) || parseInt($(this).parent().css('height'),10); alert(h); }); }); ​


Finally, remember that the values you're getting from .css aren't necessarily what the height will be when the element is finally displayed -- they're only what you want the height to be.


$('.object img').each(function(){ alert($(this).parent().css("min-height")); });

that is just to get the css attribute, a hidden object has no height or width, so you'll need to display it, get the measurments and hide it.

something like the following: http://jsfiddle.net/c2vrr/

please note that aslong as your DOM isn't 'huge' - it'll be instantanous, and you won't see the 'briefly displayed' elements.


  • How to extract a number from a string [duplicate]
  • How to use the resource module to measure the running time of a function?
  • Python PIL to extract number from image
  • Google Places API - Find a company's CID and LRD
  • Outputting SharePoint Hyperlink Column as URL
  • Uncaught TypeError: $(…).select2 is not a function
  • Disable Kendo Autocomplete
  • Center align outputs in ipython notebook
  • Simulate click Geckofx vb,net
  • How to view images from protected folder with php?
  • Adjust width of select element according to selected option's width
  • Button click event not firing in jQuery
  • C: Incompatible pointer type initializing
  • why xml file does not aligned properly after append the string in beginning and end of the file usin
  • Chart.js Multiple dataset
  • How do I get HTML corresponding to current DOM tree?
  • chrome.tabs.executeScript only fires when the Developer Console is open
  • Converting a WriteableBitmap image ToArray in UWP
  • How do I pass the string value parameter of the selected list item from an auto-populated dropdown l
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • How do I alternate colors in Flat List (React Native)
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Jquery UI tool tip close icon
  • HTML download movie download link
  • Modifying destination and filename of gulp-svg-sprite
  • Change an a tag attribute in JavaScript based on screen width
  • Weird JavaScript statement, what does it mean?
  • jquery mobile loadPage not working
  • jQuery tmpl and DataLink beta
  • Unanticipated behavior
  • How to disable jQuery.jplayer autoplay?
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • Java static initializers and reflection
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Change div Background jquery
  • unknown Exception android
  • Django query for large number of relationships
  • Observable and ngFor in Angular 2
  • Unable to use reactive element in my shiny app