Need to find height of hidden div on page (set to display:none)
You need to make element's parent visible for that one very short moment while you're getting element's dimensions. In a generic solution, all ancestors are usually traversed and are made visible. Then their display
values are set back to original ones.
There are performance concerns of course.
We considered this approach in Prototype.js implementation but ended up with getWidth
and getHeight
making only actual element visible, without traversing ancestors.
The problem with alternative solutions - such as taking element out of "hidden" parent - is that certain styles might no longer apply to an element once it's out of its "regular" hierarchy. If you have a structure like this:
<div class="foo" style="display:none;">
<div class="bar">...</div>
</div>
and these rules:
.bar { width: 10em; }
.foo .bar { width: 15em; }
then taking element out of its parent will actually result in wrong dimensions.
Getting height of a div with display:none using height() method of jquery
jQuery.height()
and .width()
do return the computed style of your element, not its actual height and width.
That an element has its display
set to none
will only change the fact that relative units can't be calculated, so you'd get %
values returned as percentage.
Other than that, there is no difference, since it's only the computed styles and not the actual size of your element.
Now jQuery will try its best to convert that percent value to an actual px
number, that is, it will return the computed size of the parent per the ratio set, but this, only to one level depth.
console.log( 'display-none $height', $('#display-none').height() );console.log( 'display-block $height', $('#display-block').height() );console.log( 'display-none-deep $height', $('#display-none-deep').height() );console.log( 'display-none $width', $('#display-none').width() );console.log( 'display-block $width', $('#display-block').width() );console.log( 'display-none computed height', getComputedStyle($('#display-none')[0] ).height );console.log( 'display-block computed height', getComputedStyle($('#display-block')[0] ).height );console.log( 'display-block real height', $('#display-block')[0].getBoundingClientRect().height );
div[id^="display"] { height: 50%; width: 200px; transform-origin: top left; transform: scale(1.5,1.5); /* won't change anything for computed values */}#display-none { display: none;}body{ height: 100vh; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="display-none"> <div id="display-none-deep"></div> hidden</div><div id="display-block">visible</div>
How to find the height of an element that is not displayed
You can copy the div with the content and put it to the body with absolute positioning top:-10000; left:-10000;
so it will be outside of visible area, then you can calculate the height and remove clone from the DOM.
UPDATE
Alternatively, in case when you add elements in dynamic way, you can set it to display:block
, position:absolute
, and visibility:hidden
- but you have to make sure that it will not change position of any element on the page. visibility:hidden
- will not show the element, but calculate it's dimensions (in contrast to display: none
)
UPDATE
In your particular case, your parent have an influence on child's dimensions, so you need to clone your element into "similar" parent which is outside of visible area. By saying "similar" I mean it should have the same dimensions, but in general - styles and everything what is related to it's size:
var wrapper = $('<div></div>').appendTo('body').css('display', 'block').css('position', 'absolute').css('top', -10000).css('left', -10000).css('width', $('table').css('width'));
var clone = $('#lower_div').clone().appendTo(wrapper);
document.getElementById("info").innerHTML = clone.height();
Here is working jsfiddle for you.
how to get (display:none)element height using pure JavaScript?
An element with display: none
never has height or width. Here's a (non jquery) way to determine it's dimensions. It positions the element temporary absolute outside the viewport and then removes display: none
. Now the element's dimensions can be queried. After that the positioning etc. is done in reverse and the height found is returned.
const hiddenEl = document.querySelector("#someEl");console.log(`display none: ${hiddenEl.clientHeight}`);console.log(`height determined by method: ${ determineHeightOfAHiddenDivElement(hiddenEl)}`);
function determineHeightOfAHiddenDivElement(elem) { elem.style.position = "absolute"; elem.style.top = "-5000px"; elem.style.display = "initial"; const height = elem.clientHeight; elem.style.display = ""; elem.style.top = ""; elem.style.position = ""; return height;}
.as-console-wrapper { top: 0; max-height: 100% !important; }
#someEl { display: none; height: 300px;}
<div id="someEl">You don't see me</div>
How do you find the dimensions of a display: none element?
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>
jQuery: Get height of hidden element in jQuery
You could do something like this, a bit hacky though, forget position
if it's already absolute:
var previousCss = $("#myDiv").attr("style");
$("#myDiv").css({
position: 'absolute', // Optional if #myDiv is already absolute
visibility: 'hidden',
display: 'block'
});
optionHeight = $("#myDiv").height();
$("#myDiv").attr("style", previousCss ? previousCss : "");
jQuery get the height of an element with display:none property
You can certainly get the height of the parent when a child element is not displayed, but it sounds like you want to get the height of the parent when all of the children's heights are accounted. In this case, you can make the child(s) hidden but displayed, grab the height, and revert:
/* parentSelector: selector we wish to know its height * childSelector: children to display when measuring parent */ function getHeight(parentSelector, childSelector) { var parent = $(parentSelector); var children = parent.children(childSelector); var styleState = [];
//set state children.each(function (i) { let c = $(this); styleState[i] = c.css(['display', 'visibility']); c.css({ display: '', visibility: 'hidden' }); });
var height = parent.css('height'); //revert state children.each(function (i) { let { display, visibility } = styleState[i]; $(this).css({ display, visibility }); });
return height;}
$('#test > div').hide();console.log(getHeight('#test', 'div'));
#test { background: brown; padding: 1em }#test > div { height: 50px; background: yellow; margin: 1em 0 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test"> <span>span</span> <div>div</div> <div>div</div></div>
Related Topics
Confusion About Node.Js Internal Asynchronous I/O Mechanism
Draw a Circle Around Nodes Groups
JavaScript Equivalent of Ruby's String#Scan
How to Declare Hash.New(0) with 0 Default Value for Counting Objects in JavaScript
Accessing JavaScript Variable from Ruby
What Blocks Ruby, Python to Get JavaScript V8 Speed
How to Raw Url Encode/Decode in JavaScript and Ruby to Get the Same Values in Both
Difference Between Statement and Function
Is Ruby Strongly or Weakly Typed
Escaping </Script> Tag Inside JavaScript
Working Twitter-Typeahead Example
Regex Match Count of Characters That Are Separated by Non-Matching Characters
How to Ignore JavaScript Exceptions When Working with Webdriver (Htmlunit, Ruby Bindings)
Ruby on Rails - Put Method on Update Ajax
Parsing JavaScript Using Ruby Code
Call Swift Function with JavaScript Using Uiwebview