Jquery: Get Height of Hidden Element in Jquery

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 getting a hidden element's height

You can show the element get the height and then hide it, visually you will not see any difference.

var height = $('elementSelector').show().height();
$('elementSelector').hide();
if(height != <<HeightToCompare>>){
    //Code here
}
//Finally make it visible
$('elementSelector').show();

Demo

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>

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>

Get the height of a hidden image

Seeing as there's really only two options that I can see:

Cloneing the item, position it so that it's invisible to the user then get it's dimensions.
Visually hide it, but keep it's presence in the DOM and get it's dimensions from there.

Both aren't great solutions, but to anyone who would like to use it:

HTML:

<img id="hidden" src="http://www.shannonhochkins.com/_images/513330a8965f59b83a00034d" />

CSS:

#hidden {display:none; margin:10px;}

JAVASCRIPT:

$.fn.actual = function(type, includeMargin){
    var elem = $(this),
        unit = 0;
        includeMargin = (includeMargin ? true : false);
    elem.css({position: 'absolute', visibility: 'visible', display: 'block'});
    switch(type) {
        case 'height':
            unit = elem.height();
        break;
        case 'width':
            unit = elem.width();
        break; 
        case 'outerHeight':
            unit = elem.outerHeight(includeMargin);
        break;
        case 'outerWidth':
            unit = elem.outerWidth(includeMargin);
        break;  
        case 'innerWidth':
            unit = elem.innerWidth(includeMargin);
        break;   
        case 'innerHeight':
            unit = elem.innerHeight(includeMargin);
        break;             
    }
    elem.css({position: 'static', visibility: 'visible', display: 'none' });
    return unit;
};

var height = $('#hidden').actual('height');
var width = $('#hidden').actual('outerWidth', true);
alert('Width: ' + width + ' height: ' + height);

DEMO:

http://jsfiddle.net/bXG5n/

Shannon

Get height of the element which is hidden in other element using JavaScript/jQuery

  $(document).ready(function() {
    $('.element').show();
    _height = $('.element').height();
    $('.element').hide();
  });

Use a loading gif icon if it needs to.

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.

How's jquery able to get the height of a hidden div?

In plain JavaScript you can do something like this and it should work:

// $("#test").hide();
// alert($("#test").height());

var el = document.getElementById("test");
el.style.position = 'absolute';
el.style.visibility = 'hidden';

alert(el.offsetHeight); // 40

jQuery is probably doing the magic for you in some other way. It's not reliable to get dimensions of hidden objects with display: none.

Edit: Here's the jQuery code that handles dimensions. You'll have to connect some dots but it doesn't seem very complicated.

Jquery: Get Height of Hidden Element in Jquery