Need to Find Height of Hidden Div on Page (Set to Display:None)

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



Leave a reply



Submit